TextField and TextEditingController in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a TextField that uses a controller.

Flutter

final myController = TextEditingController();

TextField(controller: [1]);

Drag options to blanks, or click blank then click option'

AmyController

BTextEditingController()

Ccontroller

DTextField()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a new TextEditingController() directly inside the TextField instead of the variable.

Using the wrong property name instead of controller.

The controller property of TextField needs the variable myController that holds the TextEditingController instance.

2fill in blank

medium

Complete the code to clear the text inside the TextEditingController.

Flutter

myController.[1]();

Drag options to blanks, or click blank then click option'

Aclear

Bremove

Creset

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods like reset() or delete() which do not exist on TextEditingController.

Trying to assign an empty string directly to the controller.

The clear() method empties the text inside the TextEditingController.

3fill in blank

hard

Fix the error in the code to properly dispose the TextEditingController in a StatefulWidget.

Flutter

@override
void dispose() {
  [1].dispose();
  super.dispose();
}

Drag options to blanks, or click blank then click option'

ATextEditingController

BmyController

Cdispose

Dcontroller

Attempts:

3 left

💡 Hint

Common Mistakes

Calling dispose() on the class name instead of the instance.

Forgetting to call super.dispose() after disposing the controller.

You must call dispose() on the controller variable (here myController) to free resources when the widget is removed.

4fill in blank

hard

Fill both blanks to create a TextField that updates a variable when text changes.

Flutter

String text = '';

TextField(
  onChanged: ([1]) {
    [2] = value;
  },
);

Drag options to blanks, or click blank then click option'

Avalue

Btext

Ccontroller

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong parameter name that does not match the callback signature.

Assigning to a wrong variable name.

The onChanged callback receives the new text as value. We assign it to the variable text to keep track of the input.

5fill in blank

hard

Fill all three blanks to create a TextEditingController, assign it to a TextField, and dispose it properly.

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final [1] = TextEditingController();

  @override
  void dispose() {
    [2].dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(controller: [3]);
  }
}

Drag options to blanks, or click blank then click option'

AmyController

Dcontroller

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in different places causing errors.

Forgetting to dispose the controller.

The same variable myController is created, disposed, and assigned to the TextField controller.