Flutter文本标签TextTagWidget，搜索记录流式布局显示文本标签

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 网易云【玩转大前端】配套课程
• EDU配套 教程
• Flutter开发的点滴积累系列文章

1 添加依赖

flutter_tag_layout: ^0.0.3

github源码在这里
pub.flutter-io.cn最新版在这里

2 导包

在使用到文本标签的地方

import 'package:flutter_tag_layout/flutter_tag_layout.dart';

3 标签创建文本

class TextTagPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<TextTagPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("文本标签"),
        ),
        body: Container(
          margin: EdgeInsets.all(30.0),
          child: Row(children: [
            TextTagWidget("文本标签"),
            TextTagWidget("测试"),
          ]),
        ));
  }
}

运行效果如下：

4 结合流式布局使用

class TextWarpTagPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<TextWarpTagPage> {
  
  ///文本标签集合
  List<String> tagList = ["文本标签", "测试", "这是什么", "早上好","吃饭", "再来一次"];

  @override
  Widget build(BuildContext context) {
    List<Widget> itemWidgetList = [];

    for (var i = 0; i < tagList.length; i++) {
      var str = tagList[i];
      itemWidgetList.add(TextTagWidget("$str"));
    }

    return Scaffold(
        appBar: AppBar(
          title: Text("文本标签"),
        ),
        body: Container(
          margin: EdgeInsets.only(top: 30.0, left: 10, right: 10),

          ///流式布局
          child: Wrap(
              spacing: 8.0,
              runSpacing: 8.0,

              ///子标签
              children: itemWidgetList),
        ));
  }
}

运行效果如下：

完毕