Form validation rules in Flutter - UI Render Trace

Component - Form validation rules

This UI component shows a simple form with a text input and a submit button. It checks if the input is empty and shows an error message if so. This helps users know they must enter something before submitting.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Padding
   └─ Form
      └─ Column
         ├─ TextFormField
         ├─ SizedBox
         └─ ElevatedButton

The Scaffold provides the basic screen layout with an AppBar at the top showing a title. Inside the body, Padding adds space around the form. The Form widget holds a Column that stacks the input field, some space, and a submit button vertically.

Render Trace - 7 Steps

Step 1: Scaffold

Step 2: Padding

Step 3: Form

Step 4: Column

Step 5: TextFormField

Step 6: SizedBox

Step 7: ElevatedButton

State Change - Re-render

Trigger:User taps 'Submit' button

Before

Form input empty, no error message shown

→

After

Form input empty, error message 'Please enter some text' shown below input

Re-renders:TextFormField widget and Form widget re-render to show validation error

UI Quiz - 3 Questions

What happens when the user taps 'Submit' with empty input?

A The app crashes

B An error message appears below the input field

C The input field clears automatically

D Nothing happens

Key Insight

Form validation in mobile apps helps users enter correct information by giving immediate feedback. Using a Form widget with TextFormField and validator functions keeps validation logic organized and UI responsive. Adding padding and spacing improves usability and visual comfort.

Practice

1. What does the validator property in a TextFormField do in Flutter?

easy

A. It clears the input field when pressed.

B. It styles the text inside the field.

C. It saves the input value to a database.

D. It checks the user input and returns an error message if invalid.

Solution

1. Step 1: Understand the role of validator

   The validator property is used to check if the input meets certain rules.

2. Step 2: What validator returns

   If the input is invalid, it returns a string error message; if valid, it returns null.

3. Final Answer:

   It checks the user input and returns an error message if invalid. -> Option D

4. Quick Check:

   Checks user input and returns error if invalid = D [OK]

Hint: Validator returns error string if input invalid, else null [OK]

Common Mistakes:

• Thinking validator styles the field
• Assuming validator saves data
• Confusing validator with input clearing

2. Which of the following is the correct syntax to add a validator that checks if input is empty in a TextFormField?

easy

A. validator: (value) => value.length == 0 ? 'Enter text' : null,

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

C. validator: (value) { if (value == null || value.isEmpty) return 'Enter text'; else return null; },

D. validator: (value) => if(value.isEmpty) 'Enter text';

Solution

1. Step 1: Check syntax for validator function

   The validator must be a function returning a string or null. validator: (value) { if (value == null || value.isEmpty) return 'Enter text'; else return null; }, uses a proper function with if-else, null check, and returns correctly.

2. Step 2: Identify syntax errors in other options

   B uses shorthand but lacks null check before value.isEmpty which throws if null. C uses length but lacks null check before accessing value.length which throws if null. D has invalid syntax with if without ternary or braces.

3. Final Answer:

   validator: (value) { if (value == null || value.isEmpty) return 'Enter text'; else return null; }, -> Option C

4. Quick Check:

   Full function with null check and proper returns = A [OK]

Hint: Use full function with return for validator to avoid syntax errors [OK]

Common Mistakes:

• Missing return statements
• Incorrect if syntax inside lambda
• Not handling null safety properly

3. Given this validator code in a TextFormField:

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Please enter text';
  } else if (value.length < 5) {
    return 'Minimum 5 characters';
  }
  return null;
}

What error message will show if the user enters "abc"?

medium

A. Minimum 5 characters

B. Please enter text

C. null (no error)

D. Syntax error

Solution

1. Step 1: Check if input is null or empty

   The input "abc" is not null and not empty, so the first if condition is false.

2. Step 2: Check length condition

   "abc" length is 3, which is less than 5, so the second condition is true and returns 'Minimum 5 characters'.

3. Final Answer:

   Minimum 5 characters -> Option A

4. Quick Check:

   Length less than 5 triggers 'Minimum 5 characters' = B [OK]

Hint: Check conditions in order; first true returns error [OK]

Common Mistakes:

• Ignoring length check
• Assuming empty error for non-empty input
• Confusing return null with error string

4. Identify the error in this validator code snippet:

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

medium

A. Missing null check for value before calling isEmpty

B. Should return true instead of null when valid

C. Validator must be async function

D. No error, code is correct

Solution

1. Step 1: Check null safety for value

   The validator function receives a nullable String? value, so calling value.isEmpty without checking for null causes a runtime error.

2. Step 2: Correct way to check null or empty

   Must check if value == null or value.isEmpty before using isEmpty alone.

3. Final Answer:

   Missing null check for value before calling isEmpty -> Option A

4. Quick Check:

   Null safety requires checking value before isEmpty = C [OK]

Hint: Always check for null before using isEmpty on input [OK]

Common Mistakes:

• Ignoring null safety
• Returning true instead of null
• Thinking validator must be async

5. You want to validate a password field with these rules: - Must not be empty - Must be at least 8 characters - Must contain at least one digit Which validator function correctly implements these rules?

hard

A. validator: (value) {
if (value.isEmpty) return 'Password required';
if (value.length < 8) return 'At least 8 chars';
if (!value.contains(RegExp(r'\d'))) return 'Must contain digit';
return null;
},

B. validator: (value) {
if (value == null || value.isEmpty) return 'Password required';
if (value.length < 8) return 'At least 8 chars';
if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit';
return null;
},

C. validator: (value) {
if (value == null) return 'Password required';
if (value.length <= 8) return 'At least 8 chars';
if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit';
return null;
},

D. validator: (value) {
if (value == null || value.isEmpty) return 'Password required';
if (value.length <= 8) return 'At least 8 chars';
if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit';
return null;
},

Solution

1. Step 1: Check null or empty condition

   validator: (value) { if (value == null || value.isEmpty) return 'Password required'; if (value.length < 8) return 'At least 8 chars'; if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit'; return null; }, correctly checks if value is null or empty and returns 'Password required'. Options B and C miss null safety or empty check properly.

2. Step 2: Check length and digit rules

   validator: (value) { if (value == null || value.isEmpty) return 'Password required'; if (value.length < 8) return 'At least 8 chars'; if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit'; return null; }, uses < 8 for length which means minimum 8 chars required. It uses RegExp to check digit presence correctly. Options C and D use <= 8 which wrongly rejects 8-char passwords.

3. Final Answer:

   validator: (value) { if (value == null || value.isEmpty) return 'Password required'; if (value.length < 8) return 'At least 8 chars'; if (!RegExp(r'\d').hasMatch(value)) return 'Must contain digit'; return null; }, -> Option B

4. Quick Check:

   Null safety + <8 length + digit regex = A [OK]

Hint: Check null, length & regex carefully; use < not <= for min length [OK]

Common Mistakes:

• Ignoring null safety
• Using <= instead of < for length
• Incorrect regex usage
• Missing empty string check