FormBuilderCustomField: how to add a textfield to a FormBuilderRadio?

[maciejkos]

Hi,

I am using your excellent package in my first Flutter app. However, I do have some trouble using the FormBuilderCustomField.

I would like to create a form combining FormBuilderTextField and FormBuilderRadio. Below is the desired output.

At this point, I don't care about validating the textfield itself.

Could you please give me a few pointers? I haven't found any code snippets beyond what is in the README. Thank you!

[danvick]

Hi @maciejkos,
First of all I have enjoyed dealing with this issue because it has been quite a challenge. Yours is a unique situation for this package and yet this is a very common occurrence in forms.
Here's the good news: this problem is solvable using this package.

Here was my approach on dealing with this issue:

First, we define a GlobalKey that we'll use to get the value of the specify key.
final GlobalKey<FormFieldState> _specifyTextFieldKey = GlobalKey<FormFieldState>();

Then:

FormBuilderCustomField(
    attribute: 'custom',
    valueTransformer: (val){
      if(val == "Other")
        return _specifyTextFieldKey.currentState.value;
      return val;
    },
    formField: FormField(
      builder: (FormFieldState<String> field) {
        var languages = ["English", "Spanish", "Somali", "Other"];
        return InputDecorator(
          decoration: InputDecoration(
              labelText: "What's your preferred language?"),
          child: Column(
            children: languages.map((lang) =>
              Row(
                children: <Widget>[
                  Radio<dynamic>(
                    value: lang,
                    groupValue: field.value,
                    onChanged: (dynamic value) {
                      field.didChange(lang);
                    },
                  ),
                  Expanded(
                    child: lang != "Other" ? Text(lang) : Row(
                      children: <Widget>[
                        Text(
                          lang,
                        ),
                        SizedBox(width: 20),
                        Expanded(
                          child: TextFormField(key: _specifyTextFieldKey,),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ).toList(growable: false),
          ),
        );
      },
    ),
),

Explanation:

1. You can FormBuilderCustomField's formField takes in Flutter's FormField object of any shape. I feel like I should highlight in the documentation that one may need to have some knowledge of using FormField in order to use FormBuilderCustomField.
2. We use the valueTransformer which is used to transform the value of an attribute before submitting it. In our case we check if the value selected by the user is "Other", if that's the case, we the pick whatever the user has typed in the Textfield using our earlier defined GlobalKey

[danvick]

Some follow-up if you don't mind - after observing the solution provided here - what do you think we can provide in the documentation to improve the experience when using the FormBuilderCustomField widget.

I feel like FormBuilderCustomField is the most important field since it can be used to compose any type of field - overriding what the package is already providing to make enhancements as well as implementing other input types not provided (like maps, image pickers etc.)

So if the documentation of FormBuilderCustomField is not clear, kindly assist me in understanding how it's not clear and what I can do to improve that.

Thanks in advance.

[maciejkos]

Thank you so much, @danvick! I will test this soon and reply to your feedback request within the next 7 days. My current sprint ends Monday evening.

Thanks again!

[maciejkos]

Thank you again, @danvick.

To give you some context, I specialize in data science (R/Python). This is the first mobile application I am writing by myself; I have never used Flutter/Dart before. The app includes about 80 questions which I generate by parsing a JSON file. Your package is a perfect choice for folks like me because it really simplifies making forms.

If your target audience is Flutter/Dart beginners, what would help are:

1. more comments in the code samples,
2. a couple of diagrams showing how different components work together,
3. a tutorial akin to the ones on Flutter's website, e.g.,UI/Layout; for instance, you could write a tutorial on creating custom fields :)

I hope this helps!