Building Dynamic Forms in Flutter Like a Pro

#flutter #programming #mobile #android

Ever wondered how dynamic forms actually work? Turns out, you can build smart, dynamic forms with just about any tech stack—but today, I’ll walk you through a supercharged way to do this in Flutter. And trust me, once you try it, manual form coding will feel like chiseling on stone!

We’ll leverage the awesome flutter_form_builder package for our form wizardry.

Folder Structure: Laying the Foundation
Clean code = happy dev life! Here’s how I like to organize things, following a “feature-first” structure (which scales great for teams or solo hustle):

widgets/: All your input widgets go here—text fields, radios, dropdowns—you name it.
presentation/: The home for screens and UI logic.
model/: Data models. If it’s shaping your data, it lives here.

Check out a sample setup:

The Heartbeat: Config JSON
The real superpower behind dynamic forms? Your config JSON! Store it on your server, fetch it when needed, and voilà—instantly update your UI without touching the app.

Meet the ConfigJson Class
Our ConfigJson class defines every form field, what type it is, its options, and more:

name: Unique field key (for saving form data).
label: What the user actually sees.
type: Text? Radio? Checkbox? You decide.
required: Simple true/false for validations.
options: Use this for dropdowns, radios, checkboxes—wherever you need choices.

Here's the code for reference:

enum FieldType { text, radio, checkbox, dropdown }

class LabelValue {
  final String? label;
  final String? value;
}

class ConfigJson {
  final String name;
  final String? label;
  final FieldType type;
  final bool required;
  final List<LabelValue>? options;
}

Boom. Dynamic configs are now a snap! check the code on github.

UI: Making the Magic Happen
Now, let's render the form. In your forms.dart (inside presentation/), here’s a quick peek at our build method. It wraps the dynamic fields inside a stylish, modern Scaffold.

@override 
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: [
          Expanded(
            child: FormBuilder(
              key: _formKey,
              child: FormFieldList(formConfig: formConfig),
            ),
          ),
        ],
      ),
    ),
  );
}

final _formKey = GlobalKey();
This gives us full power over form state for validation, submission, and introspection.

Rendering Each Field
Loop over the config using a FormFieldList, and hand each field off to a specialized widget that knows how to render it:

class FormFieldList extends StatelessWidget {
  final List<ConfigJson> formConfig;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: formConfig.length,
      itemBuilder: (context, index) => Field(field: formConfig[index]),
    );
  }
}

Then, inside your Field widget, switch on field.type and build the correct widget (text, radio, checkbox, or dropdown).

Validations: Mix It (in)!
Nobody likes bad data. I’ve whipped up a FormFieldValidatorsMixin that latches onto each field and injects necessary validation. Required fields? Just mark required: true in your config, and the mixin handles the rest.

mixin FormFieldValidatorsMixin {
  List<FormFieldValidator> bindValidations(ConfigJson field) {
    List<FormFieldValidator> validations = [];
    if (field.required) {
      validations.add(FormBuilderValidators.required());
    }
    return validations;
  }
}

Custom validations? Add them to your JSON and extend the mixin as needed.

Wrapping Up
And there you have it! You're now equipped to build scalable, maintainable, and fully dynamic forms in Flutter like a true pro. Simply update your JSON on the server, and your app's forms will adapt on the fly—no rebuilds, no App Store reviews, no sweat.