TextField and TextEditingController in Flutter

Introduction

We use TextField to let users type text in apps. TextEditingController helps us read or change that text easily.

When you want to get user input like name or email.

When you want to show typed text somewhere else in real time.

When you want to clear or set text programmatically.

When you want to listen to changes in the text field.

Syntax

Flutter

final controller = TextEditingController();

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

The controller connects the TextField to your code.

Always dispose the controller when no longer needed to free resources.

Examples

A simple text field for entering a name.

Flutter

final nameController = TextEditingController();

TextField(
  controller: nameController,
  decoration: InputDecoration(labelText: 'Name'),
)

Text field with initial text set.

Flutter

final emailController = TextEditingController(text: '[e-mail]');

TextField(
  controller: emailController,
  decoration: InputDecoration(labelText: 'Email'),
)

Set text programmatically before showing the field.

Flutter

final messageController = TextEditingController();

messageController.text = 'Hello!';

TextField(
  controller: messageController,
  decoration: InputDecoration(labelText: 'Message'),
)

Sample App

This app shows a text field where you can type your name. Below it, the typed text appears live. Pressing the Clear button empties the field and the displayed text.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Example')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: NameInputWidget(),
        ),
      ),
    );
  }
}

class NameInputWidget extends StatefulWidget {
  @override
  _NameInputWidgetState createState() => _NameInputWidgetState();
}

class _NameInputWidgetState extends State<NameInputWidget> {
  final TextEditingController _controller = TextEditingController();
  String _displayText = '';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextField(
          controller: _controller,
          decoration: InputDecoration(labelText: 'Enter your name'),
          onChanged: (text) {
            setState(() {
              _displayText = text;
            });
          },
        ),
        SizedBox(height: 20),
        Text('You typed: $_displayText'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            _controller.clear();
            setState(() {
              _displayText = '';
            });
          },
          child: Text('Clear'),
        ),
      ],
    );
  }
}

Important Notes

Always call dispose() on your TextEditingController in dispose() method of your widget to avoid memory leaks.

You can listen to text changes with onChanged or by adding a listener to the controller.

Use controller.text to get or set the current text.

Summary

TextField lets users type text.

TextEditingController connects your code to the text field.

You can read, set, clear, and listen to text changes easily.