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), ), ), ), ), ), ), ); } } |