TextField and TextEditingController in Flutter - Mini App: Build & Ship

Build: Simple Input Screen

A screen with a text input field that shows the typed text below it in real-time.

Target UI

-------------------------
| Simple Input Screen    |
|-----------------------|
| Enter text:           |
| [___________________] |
|                       |
| You typed:            |
|                       |
|                       |
-------------------------

Add a TextField for user input.

Use a TextEditingController to read the input.

Display the current input text below the TextField in real-time.

Starter Code

Flutter

import 'package:flutter/material.dart';

class SimpleInputScreen extends StatefulWidget {
  @override
  State<SimpleInputScreen> createState() => _SimpleInputScreenState();
}

class _SimpleInputScreenState extends State<SimpleInputScreen> {
  // TODO: Add TextEditingController here

  @override
  void dispose() {
    // TODO: Dispose the controller here
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Input Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Enter text:'),
            // TODO: Add TextField here
            SizedBox(height: 20),
            Text('You typed:'),
            // TODO: Show typed text here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

Flutter

import 'package:flutter/material.dart';

class SimpleInputScreen extends StatefulWidget {
  @override
  State<SimpleInputScreen> createState() => _SimpleInputScreenState();
}

class _SimpleInputScreenState extends State<SimpleInputScreen> {
  final TextEditingController _controller = TextEditingController();
  String _typedText = '';

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {
        _typedText = _controller.text;
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Input Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Enter text:'),
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Type something here',
              ),
            ),
            SizedBox(height: 20),
            Text('You typed:'),
            SizedBox(height: 8),
            Text(_typedText, style: TextStyle(fontSize: 18, color: Colors.blue)),
          ],
        ),
      ),
    );
  }
}

We create a TextEditingController to control the text input field. We listen to changes on this controller and update a string _typedText in the state. This string is shown below the input field to reflect what the user types in real-time. We also dispose of the controller when the widget is removed to free resources.

Final Result

Completed Screen

-------------------------
| Simple Input Screen    |
|-----------------------|
| Enter text:           |
| [Type something here] |
|                       |
| You typed:            |
| Hello Flutter!        |
|                       |
-------------------------

User taps the TextField and types text.

Typed text appears immediately below labeled 'You typed:'.

Text updates live as user types or deletes.

Stretch Goal

Add a Clear button that clears the TextField and the displayed text.

💡 Hint

Add an IconButton inside the TextField's suffixIcon that calls _controller.clear() and updates the state.

Practice

1. What is the main purpose of a TextEditingController in Flutter when used with a TextField?

easy

A. To read, set, and listen to the text input in the TextField

B. To style the TextField with colors and fonts

C. To handle button clicks inside the TextField

D. To navigate between different screens

Solution

1. Step 1: Understand TextEditingController role

   TextEditingController connects your code to the TextField's text, allowing you to read or change it.

2. Step 2: Compare with other options

   Styling, button clicks, and navigation are unrelated to TextEditingController's main function.

3. Final Answer:

   To read, set, and listen to the text input in the TextField -> Option A

4. Quick Check:

   TextEditingController manages text content [OK]

Hint: Remember: Controller manages text, not style or navigation [OK]

Common Mistakes:

• Confusing controller with styling properties
• Thinking controller handles button clicks
• Assuming controller manages navigation

2. Which of the following is the correct way to create a TextEditingController and assign it to a TextField in Flutter?

easy

A. final controller = TextFieldController();
TextField(controller: controller);

B. final controller = TextEditingController();
TextField(controller: controller);

C. final controller = TextEditingController();
TextField(textController: controller);

D. final controller = TextEditingController();
TextField(control: controller);

Solution

1. Step 1: Check correct class name and usage

   The correct class is TextEditingController and the TextField property is controller.

2. Step 2: Verify options

   final controller = TextEditingController(); TextField(controller: controller); uses correct class and property names. Options A, C, and D have wrong class or property names.

3. Final Answer:

   final controller = TextEditingController();\nTextField(controller: controller); -> Option B

4. Quick Check:

   Use TextEditingController and controller property [OK]

Hint: Remember exact names: TextEditingController and controller [OK]

Common Mistakes:

• Using wrong class name like TextFieldController
• Using wrong property names like textController or control
• Forgetting to assign controller to TextField

3. Consider this Flutter code snippet:

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

TextField(controller: controller);

print(controller.text);

What will be printed in the console?

medium

A. Hello

B. null

C. Empty string

D. Error: controller.text not set

Solution

1. Step 1: Check initial text in controller

   The controller is created with initial text 'Hello'.

2. Step 2: Understand controller.text value

   controller.text returns the current text, which is 'Hello' initially.

3. Final Answer:

   Hello -> Option A

4. Quick Check:

   Initial text in controller.text is 'Hello' [OK]

Hint: Initial text in controller.text is what prints [OK]

Common Mistakes:

• Assuming controller.text is null if not typed
• Thinking print shows empty string by default
• Expecting error without user input

4. What is wrong with this Flutter code snippet?

final controller = TextEditingController();

TextField(controller: controller);

controller.dispose();

Choose the best explanation.

medium

A. TextField requires controller to be final, so this code is invalid

B. TextEditingController cannot be assigned to TextField controller property

C. Calling dispose() immediately after creating controller causes errors when TextField uses it

D. dispose() should be called before creating the controller

Solution

1. Step 1: Understand dispose() usage

   dispose() frees resources and should be called when controller is no longer needed, not immediately after creation.

2. Step 2: Analyze code behavior

   Calling dispose() right after creation means TextField tries to use a disposed controller, causing errors.

3. Final Answer:

   Calling dispose() immediately after creating controller causes errors when TextField uses it -> Option C

4. Quick Check:

   Dispose only after widget lifecycle ends [OK]

Hint: Dispose controllers only when widget is disposed [OK]

Common Mistakes:

• Calling dispose() too early
• Confusing dispose() timing
• Thinking dispose() is needed before creation

5. You want to clear the text inside a TextField when a button is pressed. Which code snippet correctly achieves this using TextEditingController?

hard

A. final controller = TextEditingController();

ElevatedButton(onPressed: () {
controller.dispose();
}, child: Text('Clear'));

TextField(controller: controller);

B. final controller = TextEditingController();

ElevatedButton(onPressed: () {
controller.text = null;
}, child: Text('Clear'));

TextField(controller: controller);

C. final controller = TextEditingController();

ElevatedButton(onPressed: () {
controller.reset();
}, child: Text('Clear'));

TextField(controller: controller);

D. final controller = TextEditingController();

ElevatedButton(onPressed: () {
controller.clear();
}, child: Text('Clear'));

TextField(controller: controller);

Solution

1. Step 1: Identify method to clear text

   TextEditingController has a clear() method to empty the text.

2. Step 2: Check other options for correctness

   Setting text to null causes error, dispose() frees resources (not clearing), reset() does not exist.

3. Final Answer:

   Use controller.clear() inside button onPressed to clear text -> Option D

4. Quick Check:

   Use clear() to empty TextField text [OK]

Hint: Use controller.clear() to empty text field quickly [OK]

Common Mistakes:

• Setting controller.text to null (causes error)
• Calling dispose() instead of clear()
• Using non-existent reset() method