Sample Form — Part 1— Flutter
Hi All, in this story, we are going to learn to create a form in a flutter application.
Update 1: You can try all the following things in codepen.io. The below embedded codepen is the final output of this story.
Update 2: Changed git gist to latest compiling code.
Form Class
The form is an optional container for grouping together multiple form field widgets.
GlobalKey
A key that is unique across the entire app. Global keys uniquely identify elements.
FormState
A FormState object can be used to save, reset, and validate every FormField that is a descendant of the associated Form.
We need to create a global key to save and get form values at any time and for validating purpose too. In our example, we are going to create a StateFul Widget named SignUpForm with a global key that extends FormState named _formKey.
To create a form, we need to build a list of widgets containing all our form widgets just like the following example.
Before creating widgets, we should declare a variable for each of the widgets to save the values.
TextFormField
A FormField that contains a TextField.
Let’s create a TextFormField for allowing the user to enter text. In the following example, we are adding a TextFormField in the list of widgets and a variable named _name to save the value from TextFormField.
decoration
This class presents the abstract interface for all decorations. We are using InputDecoration in our example to describe the decorations like labelText, hintText to our TextFormField.
validator
An optional method that validates an input. Returns an error string to display if the input is invalid, or null otherwise.
onSaved
An optional method to call with the final value when the form is saved.
Wonder when this validator and onSaved property will be invoked? Let you know later in this post.
Remeber _formkey?
setState
setState method notifies the framework that the internal state of this object has changed.
Whenever you change the internal state of a State object, make the change in a function that you pass to setState.
Now, we have created a simple TextFormField. There are some more things we need to do for creating a TextFormField for email, age, and password.
In the below example, we have a method named validateEmail for email validation and the method is called inside the validator property.
keyboardType
The type of keyboard to use for editing the text. Used to define the input types like emailAddress, number, phone, url, etc.
FormFieldState
The current state of a FormField(like TextFormField).
In the below example, we have created a GlobalKey which extends FormFieldState named _passKey, used to get the value of the password TextFieldForm from the confirm password TextFieldForm to confirm the password. To use the equalsIgnoreCase function we need to import the string library (‘package:quiver/strings.dart’).
obscureText
Property to hide the text being edited. When this is set to true, all the characters in the text field are replaced by U+2022 BULLET characters (•).
In the next part of this story, we are going to create a Dropdown, Checkbox, Radio, and button.
