Flutter Fast Forms

CI Pub Version codecov

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

It adds these essential 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
FastChipsInput 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

Transforming any custom widget into a form field is easy to do with Flutter Fast Forms.

Let's assume a simple sample widget that provides a random integer whenever a button is pressed.

  1. Create a stateful widget extending FastFormField<T> with 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
  MyCustomField get widget => super.widget as MyCustomField;
}
  1. Implement a FormFieldBuilder<T> returning your custom widget and calling field.didChange():
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()),
          )
      ],
    ),
  );
}
  1. Add optional super-initializer parameters to your constructor as you like:
class MyCustomField extends FastFormField<int> {
  const MyCustomField({
    super.builder = myCustomFormFieldBuilder,
    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();
}

Libraries

flutter_fast_forms