flutter-building-forms

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

flutter/skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

What it does

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 demons

Repository

flutter/skills

Last updated

Apr 8, 2026

Installation Guide

Select your AI agent

How to use flutter-building-forms on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add flutter-building-forms

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/flutter/skills --skill flutter-building-forms

Fetches flutter-building-forms from flutter/skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/flutter-building-forms

Restart Cursor to activate flutter-building-forms. Access via /flutter-building-forms in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

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.

Implement the Validator: Provide a validator() callback function to each TextFormField.

Return Error Messages: If the user's input is invalid, return a String containing the specific error message. The Form will automatically rebuild to display this text below the field.

Return Null for Success: If the input passes validation, you must return null.

Workflow: Implementing a Validated Form

Follow this sequential workflow to implement and validate a form. Copy the checklist to track your progress.

Task Progress:

1. Create a StatefulWidget and its corresponding State class.

2. Instantiate final _formKey = GlobalKey<FormState>(); in the State class.

3. Return a Form widget in the build method and assign key: _formKey.

4. Add TextFormField widgets as descendants of the Form.

5. Write a validator function for each TextFormField (return String on error, null on success).

6. Add a submit button (e.g., ElevatedButton).

7. Implement the validation check in the button's onPressed callback using _formKey.currentState!.validate().

Validation Decision Logic

When the user triggers the submit action, execute the following conditional logic:

Call _formKey.currentState!.validate().

If true (Valid): All validators returned null. Proceed with form submission (e.g., save data, make API call) and display a success indicator (e.g., a SnackBar).

If false (Invalid): One or more validators returned an error string. The FormState automatically rebuilds the UI to display the error messages.

Feedback Loop: Run validator -> review errors -> fix. The user must adjust their input and resubmit until validate() returns true.

Examples

Complete Validated Form Implementation

Use the following pattern to implement a robust, validated form.

import 'package:flutter/material.dart'; class UserRegistrationForm extends StatefulWidget { const UserRegistrationForm({super.key}); @override State<UserRegistrationForm> createState() => _UserRegistrationFormState(); } class _UserRegistrationFormState extends State<UserRegistrationForm> { // 1. Persist the GlobalKey in the State class final _formKey = GlobalKey<FormState>(); @override Widget build(BuildContext context) { // 2. Bind the key to the Form return Form( key: _formKey, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 3. Add TextFormFields with validators TextFormField( decoration: const InputDecoration( labelText: 'Username', hintText: 'Enter your username', ), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter a username'; // Error state } if (value.length < 4) { return 'Username must be at least 4 characters'; // Error state } return null; // Valid state }, ), const SizedBox(height: 16), // 4. Add the submit button ElevatedButton( onPressed: () { // 5. Trigger validation logic if (_formKey.currentState!.validate()) { // Form is valid: Process data ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Processing Data')), ); } else { // Form is invalid: Errors are automatically displayed debugPrint('Form validation failed.'); } }, child: const Text('Submit'), ), ], ), ); } }

flutter-building-forms

What it does

Category

Repository

Last updated

Installation Guide

How to use flutter-building-forms on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Building Validated Forms

Contents

Form Architecture

Field Validation

Workflow: Implementing a Validated Form

Validation Decision Logic

Examples

Complete Validated Form Implementation

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

flutter-performance

flutter-ui-ux

frontend-design

premium-frontend-ui

ui-animation

high-end-visual-design

Reviews

Discussion