Flutter Fast Forms

Flutter Fast Forms is the only Dart package you'll ever need to build Flutter forms fast.

It adds these features to the Flutter SDK:

• FormField<T> wrappers for all Material / Cupertino input widgets according to the already built-in TextFormField / DropdownButtonFormField
• adaptive and highly customizable FastFormControl<T> widgets with support for validation states.
• FastForm widget that passes current form field values to onChanged
• FastFormArray widget that aggregates a flexible list of homogeneous controls similar to ListView.builder
• FastChipsInput widget that converts text input into chips as defined by Material Design
• common FormFieldValidator<T> functions

---

Getting Started

1. Add a FastForm to your widget tree:

class MyFormPage extends StatelessWidget {
  MyFormPage({Key? key, required this.title}) : super(key: key);

  final formKey = GlobalKey<FormState>();
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: FastForm(
            formKey: formKey,
            children: [],
          ),
        ),
      ),
    );
  }
}

2. Add FastFormControl<T> children to build up your form:

child: FastForm(
  formKey: formKey,
  children: [
    FastTextField(
      name: 'field_destination',
      labelText: 'Destination',
      placeholder: 'Where are you going?',
    ),
    FastDateRangePicker(
      name: 'field_check_in_out',
      labelText: 'Check-in - Check-out',
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 365)),
    ),
    FastCheckbox(
      name: 'field_travel_purpose',
      labelText: 'Travel purpose',
      titleText: 'I am travelling for work',
    ),
  ],
)

3. Wrap children with FastFormSection for grouping and consistent padding:

child: FastForm(
  formKey: formKey,
  children: [
    FastFormSection(
      header: const Text('My Form'),
      padding: EdgeInsets.all(16.0),
      children: [
        FastTextField(
          name: 'field_destination',
          labelText: 'Destination',
          placeholder: 'Where are you going?',
        ),
        // ...
      ],
    ),
  ]
)

Widget Catalog

adaptive FastFormControl<T>	adopts Material	adopts Cupertino	requires Material Widget ancestor when adaptive: true
FastAutocomplete	Autocomplete	no	yes
FastCheckbox	CheckboxListTile	CupertinoCheckbox	yes
FastChoiceChips	ChoiceChip	no	yes
FastCalendar	CalendarDatePicker	no	yes
FastDatePicker	showDatePicker	CupertinoDatePicker	no
FastDateRangePicker	showDateRangePicker	no	yes
FastDropdown	DropdownButtonFormField <String>	no	yes
FastInputChips	Autocomplete + InputChip	no	yes
FastRadioGroup	RadioListTile	no	yes
FastRangeSlider	RangeSlider	no	yes
FastSegmentedControl	no	SlidingSegmenteControl <String>	no
FastSlider	Slider.adaptive	CupertinoSlider	no
FastSwitch	SwitchListTile	CupertinoSwitch	no
FastTextField	TextFormField	CupertinoTextFormFieldRow	no
FastTimePicker	showTimePicker	no / use FastDatePicker with CupertinoDatePickerMode.time	yes

Custom Form Field Widgets

With Flutter Fast Forms transforming any custom widget into a form field goes smoothly.

Let's assume a simple form field that provides a random integer whenever a button is pressed.

1. Create a minimal FastFormField<T> and a corresponding FastFormFieldState<T>:

class MyCustomField extends FastFormField<int> {
  const MyCustomField({
    super.builder = myCustomFormFieldBuilder,
    super.key,
    required super.name,
  });

  @override
  MyCustomFieldState createState() => MyCustomFieldState();
}

class MyCustomFieldState extends FastFormFieldState<int> {
  @override
  FastSimpleCustomField get widget => super.widget as FastSimpleCustomField;
}

2. Add optional super-initializer parameters to your constructor as you like:

class MyCustomField extends FastFormField<int> {
  const MyCustomField({
    super.builder = customFormFieldBuilder,
    super.decoration,
    super.enabled,
    super.helperText,
    super.initialValue,
    super.key,
    super.labelText,
    required super.name,
    super.onChanged,
    super.onReset,
    super.onSaved,
    super.validator,
  });

  @override
  MyCustomFieldState createState() => MyCustomFieldState();
}

3. Implement the required FormFieldBuilder<T>:

Widget myCustomFormFieldBuilder(FormFieldState<int> field) {
  return InputDecorator(
    decoration: field.decoration,
    child: Row(
      children: [
        ElevatedButton(
          child: const Text('Create random number'),
          onPressed: () => field.didChange(Random().nextInt(1 << 32)),
        ),
        if (field.value is int)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12.0),
            child: Text(field.value!.toString()),
          )
      ],
    ),
  );
}