TextField and TextEditingController in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you type in this TextField?

Consider this Flutter widget code snippet. What will be the value of the TextEditingController's text after typing "hello" in the TextField?

Flutter

final controller = TextEditingController();

TextField(
  controller: controller,
  decoration: InputDecoration(labelText: 'Enter text'),
);

A The controller.text will remain empty even after typing.

B The controller.text will be "hello" after typing.

C The controller.text will contain "Enter text".

D The controller.text will be null.

💡 Hint

The controller keeps the current text inside the TextField.

The TextEditingController is linked to the TextField. When you type, the controller updates its text property to match the input.

❓ lifecycle

intermediate

When should you dispose a TextEditingController?

In a StatefulWidget, when is the correct time to call dispose() on a TextEditingController?

A After every build() call.

B In the widget's initState() method.

C In the widget's dispose() method.

D You never need to dispose it.

💡 Hint

Think about cleaning up resources when the widget is removed.

TextEditingController holds resources and listeners. To avoid memory leaks, dispose it in the widget's dispose() method.

📝 Syntax

advanced

What is the output of this code snippet?

What will be printed when this Flutter code runs and the TextField is empty, then the button is pressed?

Flutter

final controller = TextEditingController();

ElevatedButton(
  onPressed: () {
    print(controller.text.isEmpty ? 'Empty' : controller.text);
  },
  child: Text('Check'),
);

A Empty

B Prints a blank line

C Throws a runtime error

D null

💡 Hint

Check what controller.text returns when no input is given.

controller.text returns an empty string "" if no text is entered, so isEmpty is true and 'Empty' is printed.

🔧 Debug

advanced

Why does this TextField not update the controller text?

Given this code, why does typing in the TextField not change the controller's text?

Flutter

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

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

A Because setting controller.text inside onChanged causes an infinite loop and blocks updates.

B Because controller.text is read-only and cannot be set.

C Because onChanged is never called when controller is set.

D Because the controller must be recreated on every build.

💡 Hint

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

Setting controller.text inside onChanged triggers another change event, causing a loop that prevents normal updates.

🧠 Conceptual

expert

How to programmatically move cursor to end of text in TextField?

You want to set the cursor position at the end of the current text in a TextField controlled by a TextEditingController. Which code snippet achieves this?

A controller.setCursor(offset: controller.text.length);

B controller.moveCursorToEnd();

C controller.cursorPosition = controller.text.length;

D controller.selection = TextSelection.fromPosition(TextPosition(offset: controller.text.length));

💡 Hint

Look for how to set selection using TextSelection and TextPosition.

To move the cursor, set controller.selection to a TextSelection at the desired offset. The other options are invalid methods or properties.