Flutter Clear TextField Text Input Entered Text on Button Click Example

TextField widget of Flutter has a inbuilt method TextEditingController.clear() which is used to clear or empty the typed text inside Text Input widget. The clear() method would empty the entered string text and set its default value as empty. So in this tutorial we would Flutter Clear TextField Text Input Entered Text on Button Click Android iOS Example Tutorial.

Contents in this project Flutter Clear TextField Text Input Entered Text on Button Click Android iOS Example Tutorial:

1. Import material.dart package in your project’s main.dart file.

2. Create void main runApp() method and we would call our default MyApp class.

3. Creating our main Root class named as MyApp extends with State less widget. Here we would call the TextFieldCustom() class.

4. Creating a class named as TextFieldCustom extends with State full widget. Inside the class we would make the createState() method with TextFieldWidget class name. Using this method we would enable the state management in given class name.

5. Creating our main Child view class named as TextFieldWidget extends with State.

6. Creating a final type TextEditingController named as nameHolder. TextEditingController is used to create and control various operations on TextField widget like getting entered text or clearing it.

7. Creating a function named as clearTextInput() in TextFieldWidget class. Inside this function we would call the nameHolder.clear() method to clear all the entered text from Text Input widget.

8. Creating a TextField widget and 1 Raised button widget in Widget build area of TextFieldWidget class. We would call the clearTextInput() function on button onPress event.

9. Complete source code for main.dart file:

Screenshots: