Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Clear Entered Text from TextField in Flutter

In this example, we are going to show you how to clear entered text from TextField or TextFormField programmatically or button click in Flutter. See the example below:

How to Clear Text From Text Field:

Declare controller for TextField or TextFormField:

TextEditingController textarea = TextEditingController();

Set controller on TextField or TextFormField:

TextField(
  controller: textarea
)

Clear Text from TextField:

textarea.clear();

OR

textarea.text = "";

Full Flutter Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
       home: Home()
  ));
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  TextEditingController textarea = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Clear Text From TextField"),
            backgroundColor: Colors.deepPurpleAccent,
         ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
               children: [
                   TextField(
                      controller: textarea,
                      decoration: InputDecoration( 
                         hintText: "Enter Remarks",
                         focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(width: 1, color: Colors.redAccent)
                         )
                      ), 
                   ),

                   ElevatedButton(
                     onPressed: (){
                         textarea.clear();
                         //or use: 
                         //textarea.text = "";
                     }, 
                     child: Text("Clear Text from TextField")
                    )
               ],
             ),
          )
      );
  }
}

Output Screenshot:

In this way, you can clear entered text from TextField or TextFormField in Flutter.

No any Comments on this Article


Please Wait...