Flutter Form Builder

flutter_form_builder is a package designed to simplify the creation of data collection forms in Flutter. It reduces boilerplate code required for building forms, validating fields, reacting to changes, and collecting final user input.

Key capabilities include:

• Creating forms with various input types.
• Easily retrieving form values.
• Applying validators to input fields.
• Reacting to changes in form fields and validation states.

To change the image used for the iOS launch screen, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode to manage the assets.

To use Xcode:

1. Open the iOS project using open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

The example project is organized into specific source files that demonstrate different advanced form use cases. You can find these implementations in the lib/sources/ directory:

• complete_form.dart: Demonstrates all available input types.
• signup_form.dart: A practical implementation of a sign-up form.
• dynamic_fields.dart: Shows how to add or remove fields at runtime.
• conditional_fields.dart: Demonstrates how to show or hide fields based on other field values.
• submit_button.dart: Shows how to manage submit button state based on form state and validation.
• related_fields.dart: Demonstrates forms with interdependent field values.
• grouped_radio_checkbox.dart: Shows selection inputs with grouping.
• decorated_radio_checkbox.dart: Shows custom styling for selection fields.
• custom_fields.dart: Demonstrates how to implement custom form fields.

To use flutter_form_builder, wrap your input fields in a FormBuilder widget and provide it with a GlobalKey<FormBuilderState>. This key allows you to access the form's state, such as its values and validation methods.

Each input field must have a unique name property to identify its value within the form state.

final _formKey = GlobalKey<FormBuilderState>();

FormBuilder(
    key: _formKey,
    child:  FormBuilderTextField(
        name: 'text',
        onChanged: (val) {
            print(val); // Print the text value write into TextField
        },
    ),
)

To run the comprehensive example application that demonstrates various form building patterns (such as dynamic fields, conditional fields, and custom fields), follow these steps in your terminal:

1. Navigate to the example directory.
2. Fetch the required dependencies.
3. Execute the application using flutter run.

cd example
flutter pub get
flutter run

The GroupedCheckbox widget supports four layout modes via the orientation parameter:

1. OptionsOrientation.auto: Uses an OverflowBar with MainAxisAlignment.spaceEvenly to distribute items.
2. OptionsOrientation.vertical: Arranges items in a Column inside a SingleChildScrollView (vertical scrolling).
3. OptionsOrientation.horizontal: Arranges items in a Row inside a SingleChildScrollView (horizontal scrolling).
4. OptionsOrientation.wrap: Uses a Wrap widget inside a SingleChildScrollView, allowing items to flow to the next line/column based on available space.

If you are upgrading from version 9 to version 10, note the following breaking changes:

• Invalidation: invalidateField and invalidateFirstField methods on FormBuilderState have been removed. Use fields[name]?.invalidate(errorText) or fields.first.invalidate(errorText) instead.
• Focus: canRequestFocus on FormBuilderTextField is deprecated. Use FocusNode.canRequestFocus instead.
• Enabled Property: FormBuilderField.decoration.enabled is replaced by FormBuilderField.enabled.
• Renames (can be fixed with dart fix --apply):
  • FormBuilderChoiceChip $\rightarrow$ FormBuilderChoiceChips
  • FormBuilderFilterChip $\rightarrow$ FormBuilderFilterChips (Note: maxChips property removed)
  • FormBuilderDateTimePicker (Note: resetIcon property removed)
  • FormBuilder (Note: onPopInvoked property removed)

You can implement conditional validation by writing a custom validator function that inspects the value of other fields in the form via the FormBuilderState.

FormBuilderRadioGroup(
  name: 'my_language',
  options: [
    FormBuilderFieldOption(value: 'Dart'),
    FormBuilderFieldOption(value: 'Other'),
  ],
),
FormBuilderTextField(
  name: 'specify',
  validator: (val) {
    if (_formKey.currentState.fields['my_language']?.value == 'Other' &&
        (val == null || val.isEmpty)) {
      return 'Kindly specify your language';
    }
    return null;
  },
),

To reset a specific field (e.g., via a clear button in the suffix or suffixIcon of an InputDecoration), call reset() on that field's state using its GlobalKey or by accessing it through the FormBuilderState.fields map.

// Using Form Key to reset a field
IconButton(
  icon: const Icon(Icons.close),
  onPressed: () {
    _formKey.currentState!.fields['gender']?.reset();
  },
)

// Using Field Key to reset a field
IconButton(
  onPressed: () => textFieldKey.currentState?.didChange(null),
  icon: const Icon(Icons.clear),
)

When using FormBuilderDateTimePicker, you can specify how the date/time is displayed and stored using the format parameter. This parameter expects a DateFormat object from the intl package.

import 'package:intl/intl.dart';

FormBuilderDateTimePicker(
  name: 'date',
  inputType: InputType.date,
  format: DateFormat('yyyy-MM-dd'),
)