flutter_fast_forms 10.0.0

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

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	no	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()),
          )
      ],
    ),
  );
}