Links

Clear Text Fields

Clear Text Fields Action can be used for removing the texts from multiple fields with just one trigger. This comes in handy while you are implementing a form inside your app and you want to let the user reset the form (clear all the fields with one click).
You should have at least one TextField widget on the page to access the Clear Text Fields Action.

Building UI

To demonstrate this action, let's build a simple UI containing a few TextField widgets, and two buttons, one for submitting the form and the other one for resetting (or clearing) the form.
  1. 1.
    Drag and drop the TextField widgets inside a Column.
  2. 2.
    Add two Button widgets to the page.
  3. 3.
    Customize the widgets as per your requirement.
An example of building a form interface is as follows:

Defining the Action

Once you have built an interface containing TextField widgets, you are ready to define the Clear Text Fields Action.
Follow the steps below to define the Clear Text Fields Action on a widget:
  1. 1.
    Select the widget (eg., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Clear Text Fields.
  6. 6.
    Check the field names that you want to clear.
You can try out this action by clicking on the Preview button (present on the top-right corner):

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
The generated code for the Clear Text Fields action can be viewed by selecting the button on which the action is added:
FFButtonWidget(
onPressed: () async {
setState(() {
nameFieldController.clear();
emailFieldController.clear();
addressFieldController.clear();
});
},
text: 'Clear',
)
The clear() method is used on each of the TextEditingController to remove the current text value present in its associated field.

References

  • Know more about TextEditingController from here.
  • Check out this page if you want to add multiple actions.