Custom validators in Flutter - Mini App: Build & Ship

Build: Registration Form

A simple registration form screen that validates user input using custom validators for email and password fields.

Target UI

Registration Form

Email: ______________________
Password: ___________________

[ Register ]

Add a TextFormField for email with a custom validator that checks if the input contains '@' and '.'

Add a TextFormField for password with a custom validator that checks if the password is at least 8 characters long

Add a Register button that shows a message if the form is valid or highlights errors if invalid

Starter Code

Flutter

import 'package:flutter/material.dart';

class RegistrationForm extends StatefulWidget {
  @override
  State<RegistrationForm> createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Registration Form')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // TODO: Add email TextFormField with custom validator
              // TODO: Add password TextFormField with custom validator
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // TODO: Validate form and show message
                },
                child: const Text('Register'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class RegistrationForm extends StatefulWidget {
  @override
  State<RegistrationForm> createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  String? _emailValidator(String? value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your email';
    }
    if (!value.contains('@') || !value.contains('.')) {
      return 'Enter a valid email address';
    }
    return null;
  }

  String? _passwordValidator(String? value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your password';
    }
    if (value.length < 8) {
      return 'Password must be at least 8 characters';
    }
    return null;
  }

  void _submit() {
    if (_formKey.currentState?.validate() ?? false) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Registration successful!')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Registration Form')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
                keyboardType: TextInputType.emailAddress,
                validator: _emailValidator,
              ),
              TextFormField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: _passwordValidator,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: const Text('Register'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This solution uses two custom validator functions: _emailValidator and _passwordValidator. Each checks the input and returns an error message string if invalid or null if valid.

The email validator checks if the input contains both '@' and '.' characters to roughly validate an email format.

The password validator ensures the password is at least 8 characters long.

When the Register button is pressed, the form validates all fields. If all are valid, a success message appears using a SnackBar. Otherwise, the invalid fields show error messages below them.

This approach helps beginners understand how to create and use custom validation logic in Flutter forms.

Final Result

Completed Screen

Registration Form

Email: [e-mail]
Password: ********

[ Register ]

User types email and password in the fields.

If input is invalid, error messages appear below the fields after pressing Register.

If input is valid, a SnackBar appears at the bottom saying 'Registration successful!'.

Stretch Goal

Add a confirm password field with a custom validator that checks if it matches the password field.

💡 Hint

Use a TextEditingController for the password and compare its value with the confirm password input inside the validator.

Practice

1. What does a custom validator function in Flutter return when the input is valid?

easy

A. false

B. null

C. true

D. An empty string

Solution

1. Step 1: Understand validator return type

   A custom validator returns a String error message if input is invalid, otherwise null.

2. Step 2: Identify valid input return

   When input is valid, the validator returns null to indicate no error.

3. Final Answer:

   null -> Option B

4. Quick Check:

   Valid input returns null [OK]

Hint: Valid input returns null, errors return strings [OK]

Common Mistakes:

• Returning empty string instead of null
• Returning boolean true/false
• Returning error message on valid input

2. Which of the following is the correct syntax for a simple custom validator in Flutter that checks if input is empty?

easy

A. validator: (value) => value.isEmpty ? null : 'Enter text'

B. validator: (value) { if (value.isEmpty) return 'Enter text'; }

C. validator: (value) => if (value.isEmpty) 'Enter text' else null

D. validator: (value) => value!.isEmpty ? 'Enter text' : null

Solution

1. Step 1: Check correct Dart syntax for validator

   The validator must return a String or null. validator: (value) => value!.isEmpty ? 'Enter text' : null uses a concise lambda with a ternary operator correctly.

2. Step 2: Identify null safety and return values

   validator: (value) => value!.isEmpty ? 'Enter text' : null uses value! to assert non-null and returns error string if empty, else null.

3. Final Answer:

   validator: (value) => value!.isEmpty ? 'Enter text' : null -> Option D

4. Quick Check:

   Correct syntax uses ternary and returns null on valid input [OK]

Hint: Use ternary operator and return null for valid input [OK]

Common Mistakes:

• Missing return statement in block syntax
• Using if without else in lambda
• Returning null on empty input instead of error

3. Given this validator code inside a TextFormField:

validator: (value) {
  if (value == null || value.length < 5) {
    return 'Too short';
  }
  return null;
}

What happens if the user enters "abc"?

medium

A. The app crashes due to null error

B. The form accepts input with no error

C. The form shows error message 'Too short'

D. The validator returns null but error shows anyway

Solution

1. Step 1: Analyze input length check

   The validator checks if value is null or length less than 5, then returns 'Too short'.

2. Step 2: Apply input "abc" to condition

   "abc" length is 3, which is less than 5, so validator returns 'Too short'.

3. Final Answer:

   The form shows error message 'Too short' -> Option C

4. Quick Check:

   Input length < 5 triggers error message [OK]

Hint: Check input length against condition to predict error [OK]

Common Mistakes:

• Ignoring null check and assuming no error
• Confusing return null with error message
• Assuming validator crashes on short input

4. Identify the error in this custom validator code:

validator: (value) {
  if (value.isEmpty) {
    return 'Cannot be empty';
  }
}

medium

A. Using isEmpty on nullable value without null check

B. Missing return null for valid input

C. Returning a string instead of boolean

D. Validator should not use if statements

Solution

1. Step 1: Check null safety on value

   value is nullable String?, so calling value.isEmpty without null check causes error.

2. Step 2: Identify missing null check

   Must check if value is null before calling isEmpty to avoid runtime error.

3. Final Answer:

   Using isEmpty on nullable value without null check -> Option A

4. Quick Check:

   Always check for null before isEmpty on nullable String [OK]

Hint: Check for null before calling isEmpty on value [OK]

Common Mistakes:

• Assuming value is non-null without checking
• Not returning null for valid input (though important)
• Confusing return types of validator

5. You want to create a custom validator that checks if input is a valid email and also ends with ".com". Which validator implementation correctly combines these checks?

hard

A. validator: (value) {
if (value == null || !value.contains('@')) return 'Invalid email';
if (!value.endsWith('.com')) return 'Must end with .com';
return null;
}

B. validator: (value) => value!.contains('@') && value.endsWith('.com') ? null : 'Invalid email or domain';

C. validator: (value) {
if (value == null) return null;
if (!value.contains('@') || !value.endsWith('.com')) return 'Invalid email';
return null;
}

D. validator: (value) {
if (value == null || value.contains('@') && value.endsWith('.com')) return null;
return 'Invalid email';
}

Solution

1. Step 1: Check null and '@' presence

   validator: (value) { if (value == null || !value.contains('@')) return 'Invalid email'; if (!value.endsWith('.com')) return 'Must end with .com'; return null; } first checks if value is null or missing '@', returning 'Invalid email'.

2. Step 2: Check if ends with '.com'

   Then it checks if value ends with '.com', returning specific error if not.

3. Step 3: Return null if all checks pass

   If both checks pass, it returns null indicating valid input.

4. Final Answer:

   validator: (value) { if (value == null || !value.contains('@')) return 'Invalid email'; if (!value.endsWith('.com')) return 'Must end with .com'; return null; } -> Option A

5. Quick Check:

   Separate checks with clear error messages [OK]

Hint: Check conditions stepwise, return null only if all pass [OK]

Common Mistakes:

• Combining conditions incorrectly with && or ||
• Returning null on null input without error
• Not checking null before calling methods