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.