Inputs, Forms & Validation — Flutter Course

What you'll learn

Build accessible, testable forms with controllers, focus, validation, input formatting, and trustworthy submission boundaries. The lesson turns the APIs into a repeatable engineering workflow instead of a collection of isolated snippets.

By the end of this lesson, you'll be able to:

Apply Text input in a production-shaped Flutter feature
Apply Controllers and focus in a production-shaped Flutter feature
Apply Form validation in a production-shaped Flutter feature
Apply Input formatters in a production-shaped Flutter feature

Core mental model

Connect each API to the decision it supports. Flutter code stays maintainable when state, ownership, lifecycle, and platform boundaries are explicit.

Concept	What it means	Decision rule
FormState	Coordinates validation and saving across descendant fields	Use a stable GlobalKey only when the owner must invoke the form contract
Focus	Determines which control receives keyboard input	Provide a logical order and move focus intentionally after submission errors
Boundary validation	Trusted code validates untrusted submitted data	Repeat security-critical checks at the server or persistence boundary

Professional workflow

Work in small vertical slices and keep behavior observable from the first iteration.

Define the accessible validated form boundary: user goal, inputs, visible states, ownership, and expected failures.
Build the smallest working vertical slice with typed data and explicit dependencies.
Represent loading, empty, success, and failure behavior where the feature can encounter them.
Verify logic away from the UI, then exercise the rendered behavior at its public boundary.
Inspect lifecycle, accessibility, performance, security, and platform behavior before widening the feature.
Refactor only after behavior is protected by repeatable evidence.

Protect the frame

Keep build methods predictable, move side effects to explicit owners, and measure before introducing caches, isolates, or architectural layers.

Guided Flutter lab

Build a focused accessible validated form slice

This compact example keeps the important ownership and data-flow decisions visible so the behavior is easy to extend and test.

lib/profile_form.dart

class ProfileForm extends StatelessWidget {
  ProfileForm({super.key});
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) => Form(
    key: formKey,
    child: Column(children: [
      TextFormField(
        decoration: const InputDecoration(labelText: 'Display name'),
        textInputAction: TextInputAction.done,
        validator: (value) => switch (value?.trim()) {
          null || '' => 'Enter a display name',
          final name when name.length < 3 => 'Use at least 3 characters',
          _ => null,
        },
      ),
      FilledButton(
        onPressed: () {
          if (formKey.currentState!.validate()) FocusScope.of(context).unfocus();
        },
        child: const Text('Save profile'),
      ),
    ]),
  );
}

Production practice

Contract

Define the accessible validated form inputs, outputs, owner, lifecycle, visible states, and platform assumptions before selecting APIs or packages.

Verification

Protect pure rules with unit tests and the rendered public contract with widget or integration evidence; include one unavailable or failure case.

Operations

Keep dependencies replaceable, log actionable context without user secrets, and measure user-visible behavior before optimizing.

Common failure mode

Disabling submission without explaining invalid fields leaves keyboard and assistive-technology users with no actionable path to recovery.

Independent workshop

Extend the guided lab into a review-ready accessible validated form feature that fits the running course portfolio app.

Your finished workshop must include:

Text input
Controllers and focus
Form validation
Input formatters
Accessible errors
Automated verification and a short design note

Definition of done

Demonstrate the happy path, an empty or unavailable state, and at least one failure path. Add an automated check and a short note explaining one design decision.

Recap & quick check

Key takeaways

FormState: Use a stable GlobalKey only when the owner must invoke the form contract
Focus: Provide a logical order and move focus intentionally after submission errors
Boundary validation: Repeat security-critical checks at the server or persistence boundary

Quick check

1. Which rule best applies to FormState?

2. Which rule best applies to Focus?

3. Which rule best applies to Boundary validation?

Next: Lists, Grids & Scrolling