Generating Word Cloud in Flutter

Word Cloud

Generate and Visualize Word Cloud in Flutter

This is an explanation of how to use the package I made.

You can use this package in Pub Dev.

Word Cloud

Contents

• WordCloudData
• WordCloudView
• WordCloudTap
• WordCloudTapView

WordCloudData

To use the word cloud widget, you must set the desired data into the WordCloudData .

WordCloudData mydata = WordCloudData(data: data_list);

Parameter data needs list of Map that have keys word and value.

For example,

List<Map> data_list= [
  {'word': 'Apple','value': 100},
  {'word': 'Samsung','value': 60},
];

Another way to set the data is using instance method addData.

mydata.addData(String word, Double value);

WordCloudView

After setting the data, you can use the WordCloudView widget.

WordCloudView(
  data: mydata,
  mapwidth: 500,
  mapheight: 500,
)

This is the basic usage of the WordCloudView. Below word cloud is result of example data set.

mapcolor

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
)

mapcolor set the background color of word cloud.

colorlist

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
)

With the colorlist parameter, you can change word's font color. You should input list of Color . Word cloud will select font color Randomly.

shape

It is a parameter that can determine the overall shape of the Word Cloud. You must enter WordCloudShape as a factor.

There are circles and ellipses in the shapes that we support to date.

WordCloudCircle(radius: <double>),
WordCloudEllipse(majoraxis: <double>, minoraxis: <double>),

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  shape: WordCloudCircle(radius: 250),
)

WordCloudView(
  data: mydata,
  mapcolor: Color.fromARGB(255, 174, 183, 235),
  mapwidth: 500,
  mapheight: 500,
  shape: WordCloudEllipse(majoraxis: 250, minoraxis: 200),
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
)

fontStyle, fontWeight, fontFamily

You can change the design of the font by fontStyle, fontWeight, fontFamily.

mintextsize & maxtextsize

The value you set in WordCloudData does not become the font size. For proper visualization, it is necessary to adjust the ratio between value and font size of word cloud. Minimum and maximum values correspond to mintextsize and maxtextsize, and the remaining words are determined by the size in between. Initial setting of mintextsize and maxtextsize is 10 and 100.

decoration

Set the decoration for the container in the Word Cloud background.

attempt

The more this value is increased, the word cloud will try to put all the words into the map as much as possible. But it can slow down. The default value is 30.

WordCloudTap

WordCloudTap and WordCloudTapView make the word in word cloud clickable. First, you need to define WordCloudTap and set the words and functions you want to click on in WordCloudTap. The method that sets it up is addWordTap.

WordCloudTap wordtaps = WordCloudTap();

wordtaps.addWordtap(String word, Function function);

At this time, word is included in WordCloudData. Below is an example code using WordCloudTap.

WordCloudTap wordtaps = WordCloudTap();
int count = 0;
String wordstring = '';

//WordCloudTap Setting
for (int  i  =  0; i  <  data_list.length; i++) {
  void tap(){
    setState(() {
      count += 1;
      wordstring = data_list[i]['word'];
    });
  }
  wordtaps.addWordtap(data_list[i]['word'], tap);
}

WordCloudTapView

If you're done setting up WordCloudTap, you can use it as a factor for WordCloudTapView. The difference between WordCloudView and WordCloudTapView is that it requires a parameter wordtap. You can enter a WordCloudTap in wordtap.

WordCloudTapView(
  data:  mydata,
  wordtap:  wordtaps,
  mapcolor:  Color.fromARGB(255, 174, 183, 235),
  mapwidth:  500,
  mapheight:  500,
  colorlist: [Colors.black, Colors.redAccent, Colors.indigoAccent],
),