forms - 如何让 Flutter 用户在 FormBuilderTextField(Flutter Form Builder 包)中输入标签？

Question

我正在使用 flutter_form_builder 包( link to package on pub.dev )构建一个表单，并希望让用户能够将标签输入到 FormBuilderTextField 中，模仿 StackOverflow 的 UI 来输入标签(下面的屏幕截图)。

简单的 FormBuilderTextField，供引用:

FormBuilderTextField(
                      attribute: 'sampleAttribute',
                      decoration: InputDecoration(
                        labelText: "  Separate items,  with,  commas",
                        labelStyle: TextStyle(
                          fontSize: 12.0,
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                    ),

此 "Flutter - allow user enter hashtags" StackOverflow 问题很有帮助，但并没有真正解决这个问题。

Answer 1

我测试了许多选项并最终选择了 material_tag_editor 0.0.6 Flutter package .
这是输入任何标签之前 iPhone 模拟器的屏幕截图:

这是一个屏幕截图，其中输入了两个标签(使用逗号作为分隔符)，而在输入第三个标签的过程中:

这是代码:

body: SingleChildScrollView(
    child: Container(
      child: Builder(
        builder: (context) => FormBuilder(
          // was "builder: (context) => Form("
          key: _formbuilderKey,
          initialValue: {
            'date': DateTime.now(),
          },
          child: Padding(
            padding: const EdgeInsets.all(14.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  height: 12.0,
                ),
                RichText(
                  text: TextSpan(
                    style: TextStyle(
                      color: Colors.blue,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text:
                            'In just a few words, what are 3 positive things about dogs?', // was 'What are 3 good or positive things about the house, property or neighborhood?', //  [ 1 ​]
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16.0,
                        ),
                      ),
                      TextSpan(
                        text: '  (optional)',
                        style: TextStyle(
                          fontWeight: FontWeight.normal,
                          fontStyle: FontStyle.italic,
                          fontSize: 14.0,
                          color: Colors.black54,
                        ), // was 'misleading or inaccurate?',
                      ),
                    ],
                  ),
                ),
                // BEGIN code from material_tag_editor
                Padding(
                  padding: const EdgeInsets.only(top: 16.0),
                  child: TagEditor(
                    length: somethingHere.length,
                    delimiters: [
                      ','
                    ], // was delimiters: [',', ' '],  Also tried "return" ('\u2386',)
                    hasAddButton: true,
                    textInputAction: TextInputAction
                        .next, // moves user from one field to the next!!!!
                    autofocus: false,
                    maxLines: 1,
                    // focusedBorder: OutlineInputBorder(
                    //   borderSide: BorderSide(color: Colors.lightBlue),
                    //   borderRadius: BorderRadius.circular(20.0),
                    // ),
                    inputDecoration: const InputDecoration(
                      // below was "border: InputBorder.none,"
                      isDense: true,
                      border: OutlineInputBorder(
                        borderRadius: const BorderRadius.all(
                          const Radius.circular(20.0),
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.lightBlue),
                        borderRadius: const BorderRadius.all(
                          const Radius.circular(20.0),
                        ),
                        // above is per https://github.com/flutter/flutter/issues/5191
                      ),
                      labelText: 'separate,  with,  commas',
                      labelStyle: TextStyle(
                        fontStyle: FontStyle.italic,
                        backgroundColor:
                            Color(0x65dffd02), // was Color(0xffDDFDFC),
                        color: Colors.black87, // was Color(0xffD82E6D),
                        fontSize: 14,
                      ),
                    ),
                    onTagChanged: (newValue) {
                      setState(() {
                        somethingHere.add(newValue);
                      });
                    },
                    tagBuilder: (context, index) => _Chip(
                      index: index,
                      label: somethingHere[index],
                      onDeleted: onDelete,
                    ),
                  ),
                ),
                // END code from material_tag_editor