Why validation ensures data quality in Flutter - Build It to Prove It

Build: User Registration

This screen collects user information and uses validation to ensure the data entered is correct and complete before submission.

Target UI

-------------------------
| User Registration     |
|-----------------------|
| Name: [___________]   |
| Email: [___________]  |
| Password: [_______]   |
|                       |
| [Submit]              |
-------------------------

Add TextFields for Name, Email, and Password.

Validate that Name is not empty.

Validate Email format contains '@' and '.' characters.

Validate Password is at least 6 characters.

Show error messages below each field if validation fails.

Disable Submit button if any validation fails.

Show a success message when all data is valid and Submit is pressed.

Starter Code

Flutter

import 'package:flutter/material.dart';

class UserRegistration extends StatefulWidget {
  @override
  State<UserRegistration> createState() => _UserRegistrationState();
}

class _UserRegistrationState extends State<UserRegistration> {
  final _formKey = GlobalKey<FormState>();

  // TODO: Add TextEditingControllers for name, email, password

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Registration')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // TODO: Add TextFormFields for Name, Email, Password with validators
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // TODO: Validate form and show success message
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

import 'package:flutter/material.dart';

class UserRegistration extends StatefulWidget {
  @override
  State<UserRegistration> createState() => _UserRegistrationState();
}

class _UserRegistrationState extends State<UserRegistration> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  bool _autoValidate = false;

  bool get _isFormValid {
    return _formKey.currentState?.validate() ?? false;
  }

  void _submit() {
    setState(() {
      _autoValidate = true;
    });
    if (_formKey.currentState?.validate() ?? false) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Registration Successful!')),
      );
    }
  }

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Registration')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          autovalidateMode: _autoValidate ? AutovalidateMode.always : AutovalidateMode.disabled,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return 'Name cannot be empty';
                  }
                  return null;
                },
              ),
              SizedBox(height: 12),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return 'Email cannot be empty';
                  }
                  if (!value.contains('@') || !value.contains('.')) {
                    return 'Enter a valid email';
                  }
                  return null;
                },
              ),
              SizedBox(height: 12),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.length < 6) {
                    return 'Password must be at least 6 characters';
                  }
                  return null;
                },
              ),
              SizedBox(height: 24),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: _isFormValid ? _submit : null,
                  child: Text('Submit'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This screen uses a Form widget with TextFormFields for Name, Email, and Password. Each field has a validator function that checks the input:

• Name must not be empty.
• Email must contain '@' and '.' to be considered valid.
• Password must be at least 6 characters long.

The Submit button is disabled if the form is invalid, preventing bad data submission. When the user presses Submit, the form validates again and shows a success message if all data is good.

This validation ensures the app only accepts quality data, avoiding errors later and improving user experience.

Final Result

Completed Screen

-------------------------
| User Registration     |
|-----------------------|
| Name: [John Doe    ]  |
| Email: [[e-mail]]|
| Password: [******   ] |
|                       |
| [Submit]              |
-------------------------

If any field is empty or invalid, an error message appears below it.

Submit button is disabled until all fields are valid.

Pressing Submit with valid data shows a success message at the bottom.

Stretch Goal

Add a toggle to show or hide the password text.

💡 Hint

Use a boolean state variable to switch obscureText property of the password TextFormField and add an IconButton inside the field's suffixIcon.

Practice

1. Why is validation important in Flutter forms?

easy

A. It hides the keyboard after typing.

B. It makes the app run faster.

C. It changes the app's theme automatically.

D. It prevents users from entering incorrect or incomplete data.

Solution

1. Step 1: Understand the purpose of validation

   Validation checks user input to ensure it meets rules like required fields or correct formats.

2. Step 2: Identify the effect on data quality

   By preventing wrong or incomplete data, validation keeps the data accurate and reliable.

3. Final Answer:

   It prevents users from entering incorrect or incomplete data. -> Option D

4. Quick Check:

   Validation = Prevent wrong data [OK]

Hint: Validation stops bad data before saving [OK]

Common Mistakes:

• Thinking validation speeds up the app
• Confusing validation with UI styling
• Believing validation hides the keyboard

2. Which Flutter widget property is used to add validation logic to a text field?

easy

A. controller

B. validator

C. decoration

D. onChanged

Solution

1. Step 1: Recall Flutter form field properties

   TextFormField uses the validator property to run validation logic on input.

2. Step 2: Differentiate from other properties

   controller manages text, decoration styles the field, and onChanged reacts to input changes but does not validate.

3. Final Answer:

   validator -> Option B

4. Quick Check:

   Validation logic = validator [OK]

Hint: Validator property runs input checks [OK]

Common Mistakes:

• Choosing controller instead of validator
• Confusing decoration with validation
• Using onChanged for validation

3. What will happen if this Flutter validator returns a non-null string?

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Please enter text';
  }
  return null;
}

medium

A. The form field shows the error message 'Please enter text'.

B. The form field accepts the input without error.

C. The app crashes with an exception.

D. The keyboard closes automatically.

Solution

1. Step 1: Understand validator return values

   If the validator returns a string, it is treated as an error message to show on the field.

2. Step 2: Analyze the given validator code

   If input is empty or null, it returns 'Please enter text', so the error message appears on the form field.

3. Final Answer:

   The form field shows the error message 'Please enter text'. -> Option A

4. Quick Check:

   Non-null validator return = error message [OK]

Hint: Validator returns string = show error [OK]

Common Mistakes:

• Thinking null return shows error
• Assuming app crashes on validation error
• Believing keyboard closes on error

4. Identify the error in this Flutter validator code:

validator: (value) {
  if (value.isEmpty) {
    return 'Required field';
  }
  return null;
}

medium

A. The return null should be return false.

B. Validator should return true or false, not strings.

C. Missing null check for value before calling isEmpty.

D. The error message should be inside a Text widget.

Solution

1. Step 1: Check for null safety in validator

   The validator receives a nullable string, so calling isEmpty without checking for null can cause an error.

2. Step 2: Understand correct validator return types

   Validator returns a string error message or null if valid; returning strings is correct.

3. Final Answer:

   Missing null check for value before calling isEmpty. -> Option C

4. Quick Check:

   Null check needed before isEmpty [OK]

Hint: Check for null before isEmpty [OK]

Common Mistakes:

• Ignoring null safety causing runtime error
• Thinking validator returns boolean
• Trying to return widgets from validator

5. You want to ensure a Flutter form only submits when all fields are valid. Which approach best ensures data quality?

hard

A. Use a GlobalKey<FormState> and call formKey.currentState!.validate() before submitting.

B. Check if all TextEditingControllers have non-empty text before submitting.

C. Disable the submit button and never enable it.

D. Show a dialog asking users to confirm their input without validation.

Solution

1. Step 1: Understand Flutter form validation workflow

   Using a GlobalKey<FormState> allows calling validate() which runs all field validators and returns true only if all pass.

2. Step 2: Compare other options

   Checking controllers alone misses validation rules; disabling submit prevents use; dialogs without validation don't ensure data quality.

3. Final Answer:

   Use a GlobalKey<FormState> and call formKey.currentState!.validate() before submitting. -> Option A

4. Quick Check:

   FormState.validate() ensures all fields valid [OK]

Hint: Use formKey.validate() to check all fields [OK]

Common Mistakes:

• Relying only on controller text checks
• Disabling submit button permanently
• Skipping validation and asking confirmation only