Simplifying Form Creation in Flutter with Reactive Forms
When developing apps, capturing user input is a crucial aspect. In Flutter, creating forms to collect this data can be straightforward, but as the complexity of the form increases, so does the code. This article will explore how to create a registration form with input validation and dynamic fields using reactive forms in Flutter.
The Problem with Manual Form Creation
Creating forms manually in Flutter can be tedious. You need to create individual TextEditingControllers for each field, write custom validation logic, and handle the form’s state. This approach results in boilerplate code that can be difficult to maintain.
Introducing Reactive Forms
Reactive forms provide a more efficient way to create and manage forms in Flutter. They allow you to define the form’s structure and validation rules in a declarative way, making it easier to manage complex forms. In this article, we’ll use the flutter_form_builder package to create a reactive form.
Creating a Registration Form
Our example app will be an enrollment app for pets. The form will require the user to provide their name, phone number, and information about their pet, including its type and preferences. We’ll create a form with dynamic fields that change based on the user’s input.
Setting up the Basic Form Inputs
With flutter_form_builder, we can define the form’s fields and validation rules using a simple, declarative syntax. We’ll create a FormBuilder widget and define the fields using FormBuilderTextField widgets.
dart
FormBuilder(
key: _fbKey,
child: Column(
children: [
FormBuilderTextField(
name: 'first_name',
decoration: InputDecoration(labelText: 'First Name'),
validators: [FormBuilderValidators.required()],
),
FormBuilderTextField(
name: 'last_name',
decoration: InputDecoration(labelText: 'Last Name'),
validators: [FormBuilderValidators.required()],
),
FormBuilderTextField(
name: 'phone_number',
decoration: InputDecoration(labelText: 'Phone Number'),
validators: [FormBuilderValidators.numeric()],
),
],
),
)
Setting up the Pet Type Chooser
We’ll create a radio button group to allow the user to select the type of pet they have. We’ll use a FormBuilderRadioGroup widget to define the options.
dart
FormBuilderRadioGroup(
name: 'pet_type',
options: [
FormBuilderFieldOption(value: 'cat', label: 'Cat'),
FormBuilderFieldOption(value: 'dog', label: 'Dog'),
FormBuilderFieldOption(value: 'other', label: 'Other'),
],
validators: [FormBuilderValidators.required()],
)
Setting up the Dynamic Fields
Based on the user’s selection, we’ll display additional fields to collect more information about their pet. We’ll use a FormBuilder widget with a conditional statement to render the fields.
dart
FormBuilder(
key: _fbKey,
child: Column(
children: [
if (_fbKey.currentState.fields['pet_type']?.value == 'cat')
FormBuilderTextField(
name: 'cat_breed',
decoration: InputDecoration(labelText: 'Cat Breed'),
validators: [FormBuilderValidators.required()],
),
if (_fbKey.currentState.fields['pet_type']?.value == 'dog')
FormBuilderTextField(
name: 'dog_breed',
decoration: InputDecoration(labelText: 'Dog Breed'),
validators: [FormBuilderValidators.required()],
),
],
),
)
Validating and Retrieving Values from the Form
To validate the form, we’ll use the _fbKey.currentState.validate() method. If the form is valid, we can retrieve the values using the _fbKey.currentState.value property.
dart
if (_fbKey.currentState.validate()) {
final values = _fbKey.currentState.value;
print(values);
}
By using reactive forms with flutter_form_builder, we’ve simplified the process of creating a complex form with dynamic fields. This approach reduces boilerplate code and makes it easier to manage form state and validation.