Mobile 1,720 installs

Building Validated Forms

by flutter/skills

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

Skill content

Validated Flutter forms with field-level error handling and submission workflows.

- Requires StatefulWidget hosting with a persistent GlobalKey<FormState> to manage form state and validation across rebuilds

- Use TextFormField widgets with validator() callbacks that return error strings on failure or null on success

- Call _formKey.currentState!.validate() on submit to trigger all validators and automatically display error messages below fields

- Includes complete code example demonstrating username validation, error feedback, and success handling via SnackBar

Building Validated Forms

Contents

- Form Architecture

- Field Validation

- Workflow: Implementing a Validated Form

- Examples

Form Architecture

Implement forms using a Form widget to group and validate multiple input fields together.

- Use a StatefulWidget: Always host your Form inside a StatefulWidget.

- Persist the GlobalKey: Instantiate a GlobalKey<FormState> exactly once as a final variable within the State class. Do not generate a new GlobalKey inside the build method; doing so is resource-expensive and destroys the form's state on every rebuild.

- Bind the Key: Pass the GlobalKey<FormState> to the key property of the Form widget. This uniquely identifies the form and provides access to the FormState for validation and submission.

- Alternative Access: If dealing with highly complex widget trees where passing the key is impractical, use Form.of(context) to access the FormState from a descendant widget.

Field Validation

Use TextFormField to render Material Design text inputs with built-in validation support. TextFormField is a convenience widget that automatically wraps a standard TextField inside a FormField.