flutterflutter-form-builder

How to create and use radio field options from a database query using Flutter Form Builder


I am using flutter_form_builder in my project and want to create and load the formbuilderfieldoptions when I load the form. My strategy would be to query the database and create the options on the button pressed method of a floating button in the previous page. What would be the best way of passing the options into the form and using them in a radio group.

I have this code using a static radio group but can't figure out how to load them using a predefined widget. Could I create them in the button press event in the previous page and load them using a provider?

FormBuilderRadioGroup(
  name: "various_options",
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(12.0),
    labelText: "Select an Option",
    labelStyle: TextStyle(
      fontSize: _user.fontsize, fontWeight: FontWeight.normal)),
    options: const [
      FormBuilderFieldOption(value: 100, child: Text('Option 1')),
      FormBuilderFieldOption(value: 1121, child: Text('Option 2')),
      FormBuilderFieldOption(value: 211, child: Text('Option 3')),
      FormBuilderFieldOption(value: 32, child: Text('Option 4')),
      FormBuilderFieldOption(value: 44, child: Text('Option 5')),
    ],
    orientation: OptionsOrientation.vertical,
    activeColor: Colors.teal,
    initialValue: person.role,
),

Solution

  • Create the form as a separate Stateful page widget. You can then pass in the list of options (List<MyData>) as an argument to the widget, say:

    class MyData {
      final int key;
      final String value;
      ...
    }
    
    ...
    final List<MyData> options;
    const FormPageWidget({Key? key, required this.options}) : super(key: key);
    

    Then in your FormBuilderRadioGroup constructor:

    ...
    options: List<FormBuilderFieldOption>.generate(
      widget.options.length,
      (index) {
        return FormBuilderFieldOption(
          value: widget.options[index].key,
          child: Text(widget.options[index].value)
        );
      },
      growable: false,
    );
    ...