Ultimate Guide to Flutter Form Validation using Form Builder (2026)

dependencies:
  flutter:
    sdk: flutter
  flutter_form_builder: ^9.0.0  # Check pub.dev for the latest version
  form_builder_validators: ^10.0.0

flutter pub get

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

class LoginForm extends StatefulWidget {
  const LoginForm({Key? key}) : super(key: key);

  @override
  State createState() => _LoginFormState();
}

class _LoginFormState extends State {
  // 1. Create the GlobalKey to access the form state
  final _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter Form Builder Demo")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: [
              // We will add form fields here
            ],
          ),
        ),
      ),
    );
  }
}

FormBuilderTextField(
  name: 'email', // Unique key for this field
  decoration: const InputDecoration(
    labelText: 'Email Address',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.email),
  ),
  // Validators ensure data integrity
  validator: FormBuilderValidators.compose([
    FormBuilderValidators.required(),
    FormBuilderValidators.email(errorText: "Please enter a valid email"),
  ]),
),
const SizedBox(height: 15),

FormBuilderTextField(
  name: 'password',
  obscureText: true, // Hides the text for passwords
  decoration: const InputDecoration(
    labelText: 'Password',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.lock),
  ),
  validator: FormBuilderValidators.compose([
    FormBuilderValidators.required(),
    FormBuilderValidators.minLength(6, errorText: "Password must be at least 6 characters"),
  ]),
),
const SizedBox(height: 20),

ElevatedButton(
  onPressed: () {
    // Validate and save the form
    if (_formKey.currentState?.saveAndValidate() ?? false) {
      // If true, the form is valid.
      // Get the values from the form state
      final formData = _formKey.currentState?.value;
      
      print("Form Data: $formData");
      print("Email: ${formData?['email']}");
      
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Validation Successful! Processing Data...')),
      );
    } else {
      print("Validation failed");
    }
  },
  child: const Text('Login'),
)

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Validation Tutorial',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const LoginForm(),
    );
  }
}

class LoginForm extends StatefulWidget {
  const LoginForm({Key? key}) : super(key: key);

  @override
  State createState() => _LoginFormState();
}

class _LoginFormState extends State {
  final _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Form Builder Beginner Guide")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20.0),
        child: FormBuilder(
          key: _formKey,
          // autovalidateMode: AutovalidateMode.onUserInteraction, // Optional: Validates as you type
          child: Column(
            children: [
              const Text(
                "Welcome Back!",
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 20),
              
              // Email Field
              FormBuilderTextField(
                name: 'email',
                decoration: const InputDecoration(
                  labelText: 'Email',
                  border: OutlineInputBorder(),
                  prefixIcon: Icon(Icons.email_outlined),
                ),
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.required(),
                  FormBuilderValidators.email(),
                ]),
              ),
              const SizedBox(height: 15),

              // Password Field
              FormBuilderTextField(
                name: 'password',
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                  prefixIcon: Icon(Icons.lock_outline),
                ),
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.required(),
                  FormBuilderValidators.minLength(6),
                ]),
              ),
              const SizedBox(height: 15),

              // Terms and Conditions
              FormBuilderCheckbox(
                name: 'accept_terms',
                title: const Text("I accept the terms and conditions"),
                validator: FormBuilderValidators.equal(
                  true, 
                  errorText: "You must accept terms to continue"
                ),
              ),
              const SizedBox(height: 20),

              // Submit Button
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 15),
                  ),
                  onPressed: () {
                    if (_formKey.currentState?.saveAndValidate() ?? false) {
                      final formData = _formKey.currentState?.value;
                      debugPrint(formData.toString());
                      // Navigate to next page or call API here
                    } else {
                      debugPrint("Validation Failed");
                    }
                  },
                  child: const Text("Submit", style: TextStyle(fontSize: 18)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}