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.