Flutter: How to Add TextField Trailing Icon [Solved]

You have a form for your flutter app. You also add some TextField widgets inside it. Now you are required to add an Icon at the end of the TextField.

You are familiar with the search fields on the internet all have the trailing search icon.

How can we add that trailing icon at the end of the TextFormField?

Let’s learn it by creating a flutter app that has TextField with an icon.

Flutter has two text field widgets.

TextField()TextFormField()

Both fields are perfect for getting text input inside the flutter framework.

If we need a single field (Example: search field) on our android screen page we use TextField().

And if we need to create a form with a bunch of fields and also we want to perform the validation on those fields so that we receive the correct input from the user for that use Flutter Form() widget inside the Form() widget we organize multiple children inside ListView() and place the TextFormField() as a child of the ListView() widget.

TextField() and TextFormField() both have the paramete decoration.

Decoration parameter recieve InputDecoration() as an argument.

InputDecoration() has two parameters.

suffix

suffixIcon

We use these two parameters to show the trailing iconn our flutter example.

We will create a search app in this article.

Search Field app (suffixIcon Example)

Flutter Search Field App TextField() suffixIcon Example

InputDecoration() argument suffixIcon parameter take widget as an argument.

TextFormField(
            decoration: InputDecoration(
              suffixIcon: IconButton(
                icon: const Icon(Icons.search),
                onPressed: () {
                  print('Search');
                },
              ),
            ),
            onChanged: (value) {
              print(value);
            },
          ),

Here in this example, we pass the IconButton() widget. But we can simply use an Icon() widget here.

By using suffixIcon, our IconButton() widget will show at the end of the TextField. And It will always be visible to the user.

But if we want to show the icon only when we are using the field. Or when our focus is on that field then we can use this second example.

Flutter Search Field App TextField() suffix Example

Check the code

TextField(
            decoration: InputDecoration(
                suffix: IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('Search');
              },
            )),
            onChanged: (value) {
              print(value);
            },
          ),

Here user can only see the trailing icon when he taps on the field.