Flutter – Add Clear Button to TextField Widget

Adding the Clear icon button in the TextField and using the clear the text field. A sample video is given below to get an idea about what we are going to do in this article.

How to use?

Using the Text Editing Controller we can clear the text field using the Clear parameter.

Text Editing Controller:

final TextEditingController _controller = new TextEditingController();

Clear the Text Field:

_controller.clear

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Material package that gives us the important method to use and call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}

Step 3: Now we have to make a Stateful widget RunMyApp Because our application does change its state and then return the MaterialApp widget which allows us the set the title and theme and has many more properties. Also, create the TextEditingController.

class RunMyApp extends StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState() => _RunMyAppState();
}
class _RunMyAppState extends State<RunMyApp> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(primarySwatch: Colors.green),
    home: Scaffold(),
  );
}
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar has the title property to set the title of the application. Body contains a Center widget that has Text Field as a child. Text Field has the following property.

• controller – It takes the Text editing controller
• decoration – It takes the Input Decoration and has many parameters, We use the suffix Icon button that further takes the Icon Button, on the Pressed parameter used to clear the text field and have the clear icon.

Center(
         child: Padding(
           padding: const EdgeInsets.all(30.0),
           child: TextField(
             controller: _controller,
             decoration: InputDecoration(
               hintText: 'Enter a message',
               suffixIcon: IconButton(
                 onPressed: _controller.clear,
                 icon: Icon(Icons.clear),
               ),
             ),
           ),
         ),
       ),
     ),

Final Code

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

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

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  final TextEditingController _controller = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Clear Button in Text Field'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(30.0),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: 'Enter a message',
                suffixIcon: IconButton(
                  onPressed: _controller.clear,
                  icon: Icon(Icons.clear),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output