Flutter Fast Forms

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
`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

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.

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;
}

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

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

abhilashsajeev / flutter-fast-forms Goto Github PK

flutter-fast-forms's Introduction

Flutter Fast Forms

Getting Started

Widget Catalog

Custom Form Field Widgets

flutter-fast-forms's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent