Custom validators in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Custom Validator Behavior on Empty Input

Consider a Flutter TextFormField with a custom validator that checks if the input is a valid email. What will the validator return if the input is empty?

Flutter

String? emailValidator(String? value) {
  if (value == null || value.isEmpty) {
    return 'Email is required';
  }
  final emailRegex = RegExp(r"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$");
  if (!emailRegex.hasMatch(value)) {
    return 'Enter a valid email';
  }
  return null;
}

A 'Email is required'

B null

C 'Enter a valid email'

D Throws an exception

💡 Hint

Think about what the validator returns when the input is empty or null.

The validator first checks if the input is null or empty and returns 'Email is required' in that case. It only checks the regex if the input is not empty.

📝 Syntax

intermediate

Correct Syntax for Custom Validator Function

Which of the following is the correct syntax for a Flutter custom validator function that checks if a password is at least 8 characters?

A

String? passwordValidator(String value) {
  if (value.length < 8) return 'Password too short';
  return null;
}

B

void passwordValidator(String? value) {
  if (value == null || value.length < 8) throw Exception('Password too short');
}

C

bool passwordValidator(String? value) {
  return value != null && value.length >= 8;
}

D

String? passwordValidator(String? value) {
  if (value == null || value.length < 8) return 'Password too short';
  return null;
}

💡 Hint

Remember the validator must return a String? and accept nullable input.

Validators in Flutter take a nullable String and return a nullable String error message. Option D correctly handles null and returns the error message or null.

❓ lifecycle

advanced

When is a Custom Validator Called in Flutter Forms?

In a Flutter form, when does the custom validator function get called for a TextFormField?

A Every time the user types a character in the field

B Only when the field loses focus

C Only when the form's validate() method is called

D When the form is first built

💡 Hint

Think about when Flutter triggers validation checks.

Flutter calls the validator function when the form's validate() method is called, typically on form submission. It does not validate on every keystroke by default.

🔧 Debug

advanced

Debugging a Validator That Always Returns Null

A developer wrote this validator but it always returns null, even for invalid input: String? validator(String? value) { if (value!.isEmpty) { return 'Cannot be empty'; } if (value.length < 5) { 'Too short'; } return null; } What is the cause?

Flutter

String? validator(String? value) {
  if (value!.isEmpty) {
    return 'Cannot be empty';
  }
  if (value.length < 5) {
    'Too short';
  }
  return null;
}

A The value is force unwrapped unsafely causing a crash

B The second if block does not return the error string

C The validator should return a bool, not String?

D The validator is missing a final else block

💡 Hint

Look carefully at the second if block's code.

The second if block has a string 'Too short' but does not return it, so the function continues and returns null, meaning no error.

🧠 Conceptual

expert

Combining Multiple Custom Validators in Flutter

You want to combine two custom validators for a TextFormField: one checks if input is not empty, the other checks if input is numeric. How should you combine them to show the first error found?

A Return the first non-null error from calling each validator in order

B Concatenate both error messages and return them together

C Call both validators and return null only if both pass

D Use a try-catch block to catch errors from both validators

💡 Hint

Think about how Flutter expects a single error message or null.

Flutter validators return a single error message or null. To combine validators, call each and return the first error found to show one message at a time.

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