DEV Community

Pere Sola
Pere Sola

Posted on

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)