How to Use TextField in Flutter: Simple Guide

In Flutter, use the TextField widget to get text input from users. You can customize it with properties like controller to read or modify the input and decoration to style the field.

Syntax

The TextField widget is the basic way to get user input in Flutter. You can add a controller to manage the text, and use decoration to add hints or labels.

Key parts:

• controller: Controls the text inside the field.
• decoration: Adds styling like placeholder text.
• onChanged: Callback when text changes.

dart

TextField(
  controller: myController,
  decoration: InputDecoration(
    labelText: 'Enter text',
    border: OutlineInputBorder(),
  ),
  onChanged: (text) {
    print('Text changed: $text');
  },
)

Example

This example shows a simple app with a TextField and a button. When you type text and press the button, the app shows the typed text below.

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

class TextFieldDemo extends StatefulWidget {
  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

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

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

Output

App with a text input box, a button labeled 'Show Text', and below it text that updates to show what you typed after pressing the button.

Common Pitfalls

Some common mistakes when using TextField in Flutter:

• Not using a TextEditingController when you want to read or clear the input.
• Forgetting to dispose the controller in a StatefulWidget, which can cause memory leaks.
• Not wrapping TextField in padding or containers, causing layout issues.
• Using onChanged for heavy processing, which can slow the UI.

dart

/* Wrong: No controller, can't read text easily */
TextField(),

/* Right: Use controller and dispose it */
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

Here is a quick summary of useful TextField properties:

Property	Description
controller	Manages the text being edited
decoration	Adds label, hint, and border styling
onChanged	Called when the text changes
keyboardType	Sets the keyboard type (e.g., text, number)
obscureText	Hides text input (for passwords)
maxLength	Limits the number of characters
enabled	Enables or disables the field

Key Takeaways

Use TextField with a TextEditingController to read and control user input.

Always dispose the controller in StatefulWidgets to avoid memory leaks.

Use decoration to add labels and borders for better user experience.

Avoid heavy processing inside onChanged to keep UI smooth.

Wrap TextField in padding or containers to prevent layout issues.