TextFormField in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code snippet?

Consider this Flutter widget code using TextFormField. What will the UI show when the app runs?

Flutter

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
  initialValue: 'John',
  enabled: false,
)

A An enabled text field showing 'John' with no border.

B An enabled empty text field with label 'Enter your name'.

C A disabled empty text field with no label.

D A disabled text field showing 'John' with a label 'Enter your name'.

💡 Hint

Check the enabled and initialValue properties.

The enabled: false disables input, so the field is read-only. The initialValue sets the text shown. The label and border appear as specified.

❓ lifecycle

intermediate

What happens when you call _formKey.currentState!.validate() in a Flutter form?

Given a Flutter form with a TextFormField that has a validator, what does calling _formKey.currentState!.validate() do?

A It runs all validators and returns true if all fields are valid, false otherwise.

B It clears all the text fields in the form.

C It submits the form data to the server automatically.

D It disables all text fields in the form.

💡 Hint

Think about what validation means in forms.

Calling validate() runs each field's validator function and returns true only if all validators return null (no error).

📝 Syntax

advanced

What error does this Flutter code cause?

Analyze this Flutter code snippet using TextFormField. What error will it produce?

Flutter

TextFormField(
  validator: (value) {
    if (value!.isEmpty) {
      return 'Please enter text';
    }
    return null;
  },
)

A Missing return statement in validator causes a warning but runs fine.

B The code causes a syntax error due to missing else branch.

C The validator returns null implicitly if input is not empty, so no error occurs.

D The validator must always return a String, so this causes a runtime error.

💡 Hint

What does a validator return when input is valid?

If the validator returns null, it means input is valid. The code returns a string only when empty, otherwise returns null implicitly.

❓ navigation

advanced

How to focus the next TextFormField after pressing 'Next' on the keyboard?

In Flutter, you want to move focus from one TextFormField to the next when the user presses the 'Next' button on the keyboard. Which approach works best?

A Use <code>FocusScope.of(context).nextFocus()</code> inside <code>onFieldSubmitted</code> callback.

B Call <code>setState()</code> to rebuild the widget tree on submit.

C Use <code>TextEditingController.clear()</code> to clear the current field on submit.

D Wrap the fields in a <code>GestureDetector</code> and detect taps to move focus.

💡 Hint

Think about how Flutter manages keyboard focus.

Calling FocusScope.of(context).nextFocus() moves the focus to the next focusable widget, which is the next text field.

🔧 Debug

expert

Why does this TextFormField not update its text when typing?

This Flutter code uses a TextFormField with a TextEditingController. The user types, but the text does not update on screen. Why?

Flutter

final controller = TextEditingController(text: 'Hello');

TextFormField(
  controller: controller,
  onChanged: (value) {
    controller.text = value;
  },
)

A The controller must be disposed inside onChanged to update text.

B Setting controller.text inside onChanged causes the cursor to jump and text not to update properly.

C The initial text must be set inside onChanged, not in controller constructor.

D The TextFormField needs a validator to update text.

💡 Hint

Think about what happens when you set controller.text inside onChanged.

Setting controller.text inside onChanged resets the text and cursor position, causing input to not update as expected.

Practice

1. What is the main purpose of a TextFormField widget in Flutter?

easy

A. To let users type and edit text input

B. To display images in the app

C. To create buttons for user interaction

D. To navigate between screens

Solution

1. Step 1: Understand the widget's role

   TextFormField is designed to accept text input from users.

2. Step 2: Compare with other widget functions

   Other widgets like Image or ElevatedButton serve different purposes, not text input.

3. Final Answer:

   To let users type and edit text input -> Option A

4. Quick Check:

   Text input = TextFormField [OK]

Hint: TextFormField is for typing text only [OK]

Common Mistakes:

• Confusing TextFormField with buttons or images
• Thinking it handles navigation
• Assuming it only displays static text

2. Which of the following is the correct way to add a label inside a TextFormField?

easy

A. TextFormField(labelText: 'Name')

B. TextFormField(hint: 'Name')

C. TextFormField(decoration: InputDecoration(labelText: 'Name'))

D. TextFormField(text: 'Name')

Solution

1. Step 1: Recall how decoration works

   Labels and hints are added inside the decoration property using InputDecoration.

2. Step 2: Check each option's syntax

   Only TextFormField(decoration: InputDecoration(labelText: 'Name')) correctly uses decoration: InputDecoration(labelText: 'Name').

3. Final Answer:

   TextFormField(decoration: InputDecoration(labelText: 'Name')) -> Option C

4. Quick Check:

   Label goes inside decoration [OK]

Hint: Use decoration with InputDecoration for labels [OK]

Common Mistakes:

• Putting labelText directly on TextFormField
• Using hint instead of labelText for labels
• Confusing text property with label

3. What will happen when the following Flutter code runs and the user submits an empty form?

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: TextFormField(
    validator: (value) {
      if (value == null || value.isEmpty) {
        return 'Please enter text';
      }
      return null;
    },
  ),
)

medium

A. The form submits successfully without errors

B. The app crashes due to missing onSaved callback

C. The TextFormField clears automatically

D. The validator returns 'Please enter text' and shows an error

Solution

1. Step 1: Understand validator behavior

   The validator checks if the input is empty and returns an error message if true.

2. Step 2: Analyze empty input case

   If the user submits empty text, the validator returns 'Please enter text', showing an error below the field.

3. Final Answer:

   The validator returns 'Please enter text' and shows an error -> Option D

4. Quick Check:

   Empty input triggers validator error [OK]

Hint: Empty input triggers validator error message [OK]

Common Mistakes:

• Assuming form submits without validation
• Thinking missing onSaved causes crash
• Believing TextFormField clears on submit

4. Identify the error in this Flutter code snippet using TextFormField:

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

medium

A. Validator should return a boolean, not a string

B. Missing null check for value before calling isEmpty

C. TextFormField requires an onChanged callback

D. Validator cannot be used without a Form widget

Solution

1. Step 1: Check validator parameter type

   The validator receives a nullable String? value, so it can be null.

2. Step 2: Identify missing null check

   The code calls value.isEmpty without checking if value is null, causing a runtime error.

3. Final Answer:

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

4. Quick Check:

   Always check for null before isEmpty [OK]

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

Common Mistakes:

• Ignoring nullable value in validator
• Expecting validator to return boolean
• Thinking onChanged is mandatory

5. You want to create a form with a TextFormField that only accepts numbers and shows a hint 'Enter age'. Which code snippet correctly implements this?

hard

A. TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Enter age'),
validator: (value) {
if (value == null || value.isEmpty) return 'Age required';
if (int.tryParse(value) == null) return 'Enter a valid number';
return null;
},
)

B. TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(labelText: 'Enter age'),
validator: (value) => null,
)

C. TextFormField(
decoration: InputDecoration(hintText: 'Enter age'),
validator: (value) {
if (value!.isEmpty) return 'Age required';
return null;
},
)

D. TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Age'),
validator: (value) {
if (value == null) return 'Age required';
return null;
},
)

Solution

1. Step 1: Identify required properties for numeric input with hint

   The correct implementation requires keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter age'), and a validator checking for null/empty and valid integer parse.

2. Step 2: Verify validator handles all cases

   Validator must return error for null, empty, or non-numeric input using if (value == null || value.isEmpty) and int.tryParse(value) == null.

3. Final Answer:

   TextFormField( keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter age'), validator: (value) { if (value == null || value.isEmpty) return 'Age required'; if (int.tryParse(value) == null) return 'Enter a valid number'; return null; }, ) -> Option A

4. Quick Check:

   number keyboard + exact hint + null/empty/parse validator [OK]

Hint: Use keyboardType.number and validate parsing for numbers [OK]

Common Mistakes:

• Using text keyboard for numeric input
• Not validating numeric format
• Confusing hintText and labelText