TLDR; FormState
will store the state such as validation for the entire form, but FormFieldState
will store the state for only oneTextFormField
.
When we code a form in our application, we will need to use GlobalKey
cast with FormState
, GlobalKey<FormState>
, or cast with FormFieldState
, GlobalKey<FormFieldState>
to check the state of our form status, such as validating or not validating. Then how do these two classes differ and when are they used? Let's see from the examples below.
Actually, these two classes have specific uses: FormState
is used for the Form
widget to validate every FormField
under the Form
only. If FormState
is used with TextFormField
, the currentState will immediately be null because FormState only accepts types that are Form
. We can easily see this from the class definition of FormState
.
Similarly, FormFieldState is specifically used for FormField type widgets only, which means TextFormField
, being a class built from FormField, can use FormFieldState. And if we use FormState with TextFormField, the currentState of FormState will also be null because it’s not used with the correct type.
The purpose of using both types is similar, for methods of State such as validate or reset. The difference is just that FormState is used for Forms that encompass every FormField, while FormFieldState is used for a single FormField only. However, even though the purpose of use is similar, they cannot be used interchangeably.
Bonus: TextField vs. TextFormField
TLDR; TextFormField
is used with Form
for validation. If you want a regular input text, useTextField
.
Suppose we don't have the TextFormField
widget for creating a Form
. To validate the TextField
, we must encapsulate the TextField
widget with another FormField
widget. Since validating TextField
is a frequent necessity in every app, Flutter has integrated it into TextFormField
for the convenience of Flutter developers. In summary, if we want the TextField
to have validation or be used in a form, use TextFormField
. If not, a regular TextField
will suffice.
Summary
I hope this article helps you understand the use of widgets and classes with similar names, like FormState vs. FormFieldState or TextField vs TextFormField, more easily. Because everyone who seeing these widget groups for the first time will wonder how much they differ since their names are very similar. Let's summarize the points again:
FormState
is specifically used withForm
to validate allFormFields
within the Form.FormFieldState
is used withFormField
widgets and widgets that incorporateFormField
, such asTextFormField
.TextFormField
is used alongsideForm
for validation.TextField
is used when there is no need for validation.