Forms and Input Widgets
Learning Objectives
- You know of the variety of input widgets in Flutter.
- You can create forms with Flutter using Flutter Form Builder.
Flutter has a set of widgets that can be used to provide input. These widgets include Checkbox, Switch, TextField, and many others. The following example outlines an application that shows a few such widgets to the user.
The above example creates an application that shows a Checkbox, a Switch, and a TextField to the user. The application does not maintain the state of the input elements, and there is little information on what the input elements relate to.
While Flutter provides widges for input and for constructing forms, creating forms with Flutter can be cumbersome. Thus, there exists a range of libraries for the task. One such library is Flutter Form Builder, which we look into next.
Flutter form builder
Flutter Form Builder is a Flutter library that provides the functionality for building forms with a range of input fields and ready-made mechanisms for validating input. To use Flutter Form Builder in an application, add the dependency flutter_form_builder to the dependencies in the pubspec.yaml file of the project.
Information on running projects locally and adding dependencies can be found in the section Local Development Setup.
When Flutter Form Builder is in the project depedencies, it can be imported to the source files with the statement import 'package:flutter_form_builder/flutter_form_builder.dart'.
A form is created with the FormBuilder widget, which acts as a container for the fields in the form. The FormBuilder widget takes a key and a child as arguments. The key is an instance of a GlobalKey<FormBuilderState>, which is used to identify the form and to access the form data, and the child is either a single input element or a widget tree containing a collection of input elements.
The following example outlines an application that uses Flutter Form Builder to create a form with a Checkbox, a Switch, and a TextField. The widgets are created using Flutter Form Builder library. The widget FormBuilderCheckbox is used to create a Checkbox, FormBuilderSwitch is used to create a Switch, and FormBuilderTextField is used to create a TextField.
When you try out the above application, you’ll notice that the switch has a text “Switch” next to it, and the checkbox has a text “Checkbox” next to it. These correspond to the text widgets given to the title property. The textfield, however, has no information that would indicate what to type in it.
For additional form fields, see the Flutter Form Builder documentation.
Adding information
When creating forms, it is important to provide information to the user about the purpose of the form and the input elements. When working with Flutter Form Builder, some of the widgets have a title property that can be used to provide information about the input element. With text fields, the FormBuilderTextField widget has a decoration property that can be used to provide hints and other information to the user.
The decoration property allows setting an InputDecoration for the textfield. An input decoration can include a hint text, a label text, a prefix text, a suffix text, an icon to the beginning and the end of the input field, and other properties that provide information about the field.
The following creates an instance of InputDecoration that creates a border for the text field and adds a hint text stating “Type text here”, and then uses the InputDecoration in the FormBuilderTextField widget.
Now, each of the fields has a label that provides information about the field. The Checkbox and Switch have a title that describes the field, and the TextField has a hint that could provide information about what to type into the field. In addition, the TextField has a border that separates the field from the rest of the content.
Clearing and submitting the form
When working with Flutter Form Builder, the form data is accessed through the key that has been passed to the key property of the FormBuilder widget. The key property is an instance of a GlobalKey<FormBuilderState>, which is used to identify the form — the FormBuilderState object of the key can be accessed through the currentState property of the key. The FormBuilderState object provides methods for clearing the form and submitting the form data.
To clear the form, the FormBuilderState object provides the method reset, which clears the form by setting the state of the form to its initial state. To submit the form, on the other hand, the form needs to be saved by calling the method saveAndValidate, which validates the form data (if validation rules are given) and stores the form data to the property value of the FormBuilderState object. The value property is a map that contains the data of the form fields at the time of calling the saveAndValidate method; the keys are the names of the fields and the values are the data of the fields.
The following example adds two buttons to the earlier form. The clear button clears the form, and the submit button prints the form data to the console.