TextField and TextEditingController Guide

Flutter provides a simple yet powerful way to handle text input using TextField and TextEditingController. Whether you’re building a login form, a chat app, or a user feedback screen, understanding how these components work is essential for managing user input effectively.

In this tutorial, we’ll walk you through the fundamentals of using TextField and TextEditingController in Flutter using Android Studio. We’ll cover setup, real-time text tracking, and clearing the input field. This guide is especially useful for developers creating input forms and text-based UI features.

What is a TextField in Flutter?

A TextField is a widget that allows users to enter and edit text. You can customize its behavior, appearance, and functionality by pairing it with a TextEditingController.

Setting Up the Environment

Before you begin, make sure you have:

Flutter SDK installed
Android Studio with Flutter plugin
An emulator or physical device ready

Step-by-Step Implementation

1. Create a Flutter Project

Open Android Studio → New Flutter Project → Name it textfield_tutorial.

2. Setup `TextEditingController`

We’ll use a controller to read the text input and perform actions like clearing the field.

File: main.dart

import 'package:flutter/material.dart';
import 'my_home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

File: my_home_page.dart

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  void _submitText() {
    setState(() {
      _displayText = _controller.text;
    });
  }

  void _clearText() {
    _controller.clear();
    setState(() {
      _displayText = '';
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField & Controller'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter your text',
              ),
            ),
            const SizedBox(height: 20),
            Row(
              children: [
                ElevatedButton(
                  onPressed: _submitText,
                  child: const Text('Submit'),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: _clearText,
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                  child: const Text('Clear'),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Text(
              'Result: $_displayText',
              style: const TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

Key Features Covered

Text input tracking: Read live input using TextEditingController.
State updates: Real-time updates on user action.
Clear function: Empty the text field with a single button.
Code separation: Logic and UI separated into individual files for better organization.

Best Practices

Always dispose of your controller in the dispose() method to free up resources.
Use InputDecoration for better user experience.
Keep logic separate from UI for scalability.

Additional Tips

For more detailed UI design using TextField, refer to the official Flutter TextField documentation.

Final Thoughts

Using TextField and TextEditingController in Flutter is both straightforward and flexible. You can track user input in real time, manage form behavior, and build fully functional input features with just a few lines of code. This guide should serve as a strong foundation for building text input interfaces using Android Studio in Flutter.

Post Views: 60