Member-only story

Adding a Clear Icon to the TextField Widget in Flutter

Code on the Rocks
2 min readJun 10, 2020

--

Receiving and acting on user input is essential to the success of most apps these days. If the experience of typing words into a form field or search bar is frustrating, user’s may be discouraged from using your app. For instance, maybe the input field doesn’t auto-capitalize words even though it should. Or maybe deleting the current value in a form can only be done by hitting the backspace button seventeen times. It’s the little things like this that can send some people over the edge.

In this article, I’m going to focus primarily on adding a conditional clear icon to TextFields in Flutter.

TextFields

The TextField is a widget that can be used to quickly gather user text input. To see it in it’s most basic form, create a new Flutter project and replace the code in main.dart with this:

The output is extremely underwhelming…and that’s why this article is necessary.

Adding a Clear Icon

--

--

No responses yet