How to Use TextEditingController in Flutter: Simple Guide

In Flutter, use TextEditingController to control and access the text inside a TextField. Create a controller, assign it to the controller property of the TextField, and then read or modify the text via the controller's text property.

Syntax

The TextEditingController is created as an object and linked to a TextField through its controller property. You can read or set the text using the controller's text property.

• TextEditingController(): Creates the controller.
• controller: yourController: Connects the controller to the TextField.
• yourController.text: Gets or sets the current text.

dart

final TextEditingController myController = TextEditingController();

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

// To read text:
String currentText = myController.text;

// To set text:
myController.text = 'New text';

Example

This example shows a simple Flutter app with a TextField controlled by TextEditingController. When you press the button, it shows the current text below the field.

dart

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('TextEditingController Example')),
        body: TextFieldExample(),
      ),
    );
  }
}

class TextFieldExample extends StatefulWidget {
  @override
  _TextFieldExampleState createState() => _TextFieldExampleState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(labelText: 'Type something'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _displayText = _controller.text;
              });
            },
            child: Text('Show Text'),
          ),
          SizedBox(height: 20),
          Text('You typed: $_displayText'),
        ],
      ),
    );
  }
}

Output

A screen with a text input field labeled 'Type something', a button labeled 'Show Text', and below it text that updates to show what you typed after pressing the button.

Common Pitfalls

Common mistakes when using TextEditingController include:

• Not disposing the controller in dispose() method, which can cause memory leaks.
• Creating a new controller inside build() method, which resets the text every rebuild.
• Forgetting to assign the controller to the TextField, so changes are not tracked.

dart

/* Wrong: Creating controller inside build() */
Widget build(BuildContext context) {
  final controller = TextEditingController(); // BAD: resets on every build
  return TextField(controller: controller);
}

/* Right: Create controller once in State class and dispose */
class _MyWidgetState extends State<MyWidget> {
  final controller = TextEditingController();

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

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

Quick Reference

TextEditingController Cheat Sheet:

• TextEditingController(): Create controller.
• controller.text: Get or set text.
• controller.clear(): Clear text.
• controller.dispose(): Clean up when done.
• Assign controller to TextField(controller: controller).

Key Takeaways

Always create a TextEditingController once and assign it to your TextField's controller property.

Use controller.text to read or update the text inside the TextField.

Dispose the controller in your State's dispose() method to avoid memory leaks.

Avoid creating the controller inside the build() method to prevent resetting the text on rebuilds.