Flutter 标签添加选择与流式布局结合TextTagWidget

引入依赖 flutter_tag_layout: ^0.0.3
如下效果实现

image.png

定义一套要是用的本地标签展示数据
List tagList = ["上海", "大连", "齐齐哈尔", "黑龙江", "深圳", "大理"];
定义展示widget
List locationWidgetList = [];
填充List中widget代码如下：

for (var i = 0; i < tagList.length; i++) {
  var str = tagList[i];
  locationWidgetList.add(InkWell(
    onTap: () {
      print('$str');
      setState(() {
        showRed = i;
      });
    },
    child: TextTagWidget(
      '$str',
      textStyle: TextStyle(fontSize: 11, color: Colors.white), //设置字体
      borderColor: Colors.white, //设置边框颜色
      backgroundColor: showRed == i
          ? Color.fromRGBO(241, 77, 86, 1)
          : Color.fromRGBO(241, 77, 86, 0.5),
    ),
  ));
}
locationWidgetList.add(InkWell(
  onTap: () {
    print('点击');
  },
  child: TextTagWidget(
    '+',
    textStyle: TextStyle(fontSize: 11, color: Colors.white), //设置字体
    borderColor: Colors.white,
    backgroundColor: Color.fromRGBO(241, 77, 86, 0.7),
  ),
));

TextTagWidget便是展示标签的widget，'+'点击动作实现效果是一只跟随在标签最后一位实现动态添加标签

制定区域展示标签 Wrap( children: locationWidgetList, )

 Row(
        children: [
          SizedBox(
            width: 20,
          ),
          Expanded(
              child: Wrap(
            children: locationWidgetList,
          )),
          SizedBox(
            width: 20,
          ),
        ],
      ),