FormState vs FormFieldState in Flutter

FormState vs FormFieldState in Flutter

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 with Form to validate all FormFields within the Form.

  • FormFieldState is used with FormField widgets and widgets that incorporate FormField, such as TextFormField.

  • TextFormField is used alongside Form for validation.

  • TextField is used when there is no need for validation.