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 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
  • FastInputChips 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
FastAutocompleteAutocompletenoyes
FastCheckboxCheckboxListTilenoyes
FastChoiceChipsChoiceChipnoyes
FastCalendarCalendarDatePickernoyes
FastDatePickershowDatePickerCupertinoDatePickerno
FastDateRangePickershowDateRangePickernoyes
FastDropdownDropdownButtonFormField
<String>
noyes
FastInputChipsAutocomplete + InputChipnoyes
FastRadioGroupRadioListTilenoyes
FastRangeSliderRangeSlidernoyes
FastSegmentedControlnoSlidingSegmenteControl
<String>
no
FastSliderSlider.adaptiveCupertinoSliderno
FastSwitchSwitchListTileCupertinoSwitchno
FastTextFieldTextFormFieldCupertinoTextFormFieldRowno
FastTimePickershowTimePickerno / 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;
}
  1. 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();
}
  1. 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()),
          )
      ],
    ),
  );
}

Libraries

flutter_fast_forms