textfield_tags

这是一个简单的组件，它允许用户通过在文本框中输入标签名称来创建标签，并使这些标签出现在文本框中。输入标签后，用户可以通过按空格键或回车键来保存标签，然后继续输入另一个标签。

兼容性

sdk: ">=2.7.0 <3.0.0"

flutter: ">=1.17.0 <2.0.0"

入门

要开始使用此组件，您需要按照 Flutter.dev 上的安装指南，在您的项目中导入该包。

用法

要使用此组件，

  1. 在您的 dart 文件中 import 'package:textfield_tags/textfield_tags.dart';
  2. 调用组件 TextFieldTags()。
  3. 该组件接受三个参数：TagsStyler、TextFieldStyler 和一个返回用户输入的标签的回调函数。
    如果您愿意，可以研究 TagsStyler 和 TextFieldStyler 的属性以进行更多自定义。

当您想使用它时，请按以下方式调用 TextFieldTags() 组件，并根据您的喜好进行自定义

   TextFieldTags(
      textFieldStyler: TextFieldStyler(
          //These are properties you can tweek for customization

          // bool textFieldFilled = false,
          // String helperText = 'Enter tags',
          // TextStyle helperStyle,
          // String hintText = 'Got tags?',
          // TextStyle hintStyle,
          // EdgeInsets contentPadding,
          // Color textFieldFilledColor,
          // bool isDense = true,
          // bool textFieldEnabled = true,
          // OutlineInputBorder textFieldBorder = const OutlineInputBorder(),
          // OutlineInputBorder textFieldFocusedBorder,
          // OutlineInputBorder textFieldDisabledBorder,
          // OutlineInputBorder textFieldEnabledBorder
          ),
      tagsStyler: TagsStyler(
          //These are properties you can tweek for customization

          // EdgeInsets tagPadding = const EdgeInsets.all(4.0),
          // EdgeInsets tagMargin = const EdgeInsets.symmetric(horizontal: 4.0),
          // BoxDecoration tagDecoration = const BoxDecoration(color: Color.fromARGB(255, 74, 137, 92)),
          // TextStyle tagTextStyle,
          // Icon tagCancelIcon = const Icon(Icons.cancel, size: 18.0, color: Colors.green)
          ),
      onTag: (tag) {
        //This give you the tag entered
        
        //print(tag)
      },
    )

示例

  TextFieldTags(
      tagsStyler: TagsStyler(
        tagTextStyle: TextStyle(fontWeight: FontWeight.bold),
        tagDecoration: BoxDecoration(color: Colors.blue[300], borderRadius: BorderRadius.circular(8.0), ),
        tagCancelIcon: Icon(Icons.cancel, size: 18.0, color: Colors.blue[900]),
        tagPadding: const EdgeInsets.all(6.0)
     ),
     onTag: (tag) { print(tag)},  
   )

i1

  TextFieldTags(
      tagsStyler: TagsStyler(
        tagTextStyle: TextStyle(fontWeight: FontWeight.normal),
        tagDecoration: BoxDecoration(color: Colors.blue[300], borderRadius: BorderRadius.circular(0.0), ),
        tagCancelIcon: Icon(Icons.cancel, size: 18.0, color: Colors.blue[900]),
        tagPadding: const EdgeInsets.all(6.0)
     ),
     onTag: (tag) { print(tag)},  
   )

i2

  //The Colors for this are used from https://flutter-color-picker.herokuapp.com/
  TextFieldTags(
      tagsStyler: TagsStyler(
        tagTextStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), 
        tagDecoration: BoxDecoration(color: const Color.fromARGB(255,171,81,81), borderRadius: BorderRadius.circular(8.0), ),
        tagCancelIcon: Icon(Icons.cancel, size: 16.0, color: Color.fromARGB(255,235,214,214)),
        tagPadding: const EdgeInsets.all(10.0),
     ),
     onTag: (tag) { print(tag)},  
   )

i3

GitHub

https://github.com/eyoeldefare/textfield_tags