DEV Community

Pere Sola
Pere Sola

Posted on

1

Flutter - how to make virtual keyboard disappear

If you have a TextFormField you will have the virtual keyboard appear so users can type. However, once the action button is clicked the keyboard remains visible. Users can click on an Android button to hide it but this is annoying.

In my app, the TextFormField has a search button and I want the keyboard to disappear once the button has been clicked.

I did a bit of research, and two strategies seem to be available:

1.- Listener class - you wrap your button with the Listener class and you can pass the callback to any of the exposed properties: onPointerDown, onPointerUp, etc.

The callback should be

(PointerEvent event) =>
                FocusManager.instance.primaryFocus?.unfocus(),
Enter fullscreen mode Exit fullscreen mode

2.- GestureDetector class. According to folks online, you should be able to wrap your button with the GestureDetector widget and use the onTap property. Like so:

onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
Enter fullscreen mode Exit fullscreen mode

However, it didn't work for me and I didn't have a chance to dig deeper, so I went with option 1 above.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay