How to enable Flutter user to enter tags into a FormBuilderTextField (Flutter Form Builder package)?

Question

I'm building a form using the flutter_form_builder package (link to package on pub.dev) and would like to enable the user to enter tags into a FormBuilderTextField, mimicking StackOverflow's UI for entering tags (screenshot below).

Simple FormBuilderTextField, for reference:

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

This "Flutter - allow user enter hashtags" StackOverflow question was helpful, but doesn't really address this.

Solution

I tested many options and settled on the material_tag_editor 0.0.6 Flutter package.

Here's a screenshot from an iPhone simulator before any tags are entered:

And here's a screenshot with two tags entered (using the comma as a delimiter), while in the middle of typing a 3rd tag:

Here's the code:

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

Comments

[Mark Gavagan]

Thank you @Maritn Ge. I'm a Flutter novice, so if you have the code built please paste it. I will try what you suggest. Part of what's tricky is doing this WITHIN the Flutter Form Builder package. Stay tuned...

[Mark Gavagan]

Thanks, but I don't think there's a way for a user to type-in their own tags that may not yet exist

[Maritn Ge]

@MarkGavagan if you have any questions feel free to ask me in the comments here, i can add code examples to the answer!

[Mark Gavagan]

Thanks again @Martin Ge. I've considered this carefully and it would make a form with 8 questions have the visual and spacial weight of 10 questions (25% increase), so it's not a good fit for this particular situation. If I can find or build a good (compact) solution, I'll post it here.

[Maritn Ge]

I do not follow. what do you mean 8 questions having the weight of 10? what do you mean by questions in general? i thought you were entering tags/keywords into a row, maybe if I know what you mean by 'questions' i can come up with a better solution!

[Mark Gavagan]

Sorry I wasn't clear. This is one of 8 questions in a form. Because the solution you propose consumes so much space, it may have the effect of making the form feel 25% more "weighty" or cumbersome to users. ALSO, I'm building an approach using material_tag_editor: ^0.0.6 package and will post that here, if it works well. Thanks!

[Mark Gavagan]

The UI works great, BUT the data is not being submitted with the “Flutter Form Builder” form, so I created this question: stackoverflow.com/questions/65496387/…