dart - 在 flutter 中制作词云

Question

我想在flutter中创建一个词云。有办法做到吗？例如，如果我有一个列表

List words = ['banana','banana','banana','banana','purple','orange','apple','apple','green']

我希望重复几次的元素以大字体显示，重复几次的元素以小字体显示。

Answer 1

我需要在 Flutter 中创建一个词云，所以我创建了这个包:https://github.com/letsar/flutter_scatter

你可以像这样创建一个词云:

class WordCloudExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> widgets = <Widget>[];
    for (var i = 0; i < kFlutterHashtags.length; i++) {
      widgets.add(ScatterItem(kFlutterHashtags[i], i));
    }

    final screenSize = MediaQuery.of(context).size;
    final ratio = screenSize.width / screenSize.height;

    return Center(
      child: FittedBox(
        child: Scatter(
          fillGaps: true,
          delegate: ArchimedeanSpiralScatterDelegate(ratio: ratio),
          children: widgets,
        ),
      ),
    );
  }
}

class ScatterItem extends StatelessWidget {
  ScatterItem(this.hashtag, this.index);
  final FlutterHashtag hashtag;
  final int index;

  @override
  Widget build(BuildContext context) {
    final TextStyle style = Theme.of(context).textTheme.body1.copyWith(
          fontSize: hashtag.size.toDouble(),
          color: hashtag.color,
        );
    return RotatedBox(
      quarterTurns: hashtag.rotated ? 1 : 0,
      child: Text(
        hashtag.hashtag,
        style: style,
      ),
    );
  }
}

你最终会得到以下布局: