Check Mobile App
Read now
Start a Project

Dismissing the Keyboard in Flutter

Save

In this article, we are going to show how to dismiss the keyboard in Flutter the right way.

Before moving further first, we need to know when and why to dismiss the keyboard.

When we click the textField or textFormField in a flutter app, the on-screen keyboard pops up to the screen and the user wants it to be dismissed once click outside the textField or textFormField or any button. But flutter doesn’t provide this out of the box then how to do it?

Dismissing the keyboard

First, we need to detect the tap or click which is outside the textField or textFormField and we can achieve this by wrapping the MaterialApp widget inside the GestureDetector widget.

The reason we are wrapping the MaterialApp widget with the GestureDetector is that we want this behavior throughout the Flutter app and for most of the Flutter apps the MaterialApp widget is the root widget.

To trigger the keyboard dismissal in Flutter after clicking outside the textField or textFormField, we need to remove the current focus from the textField or textFormField. First, get the current FocusNode using FocusScope.of(context):

In the above code snippet, after getting the current FocusNode we are checking that if this current FocusNode doesn’t have a hasPrimaryFocus and its focusedChild is not null then we are calling the unfocus()on the currently focused node using Focusmanager to remove the focus.

Thanks for reading.

Happy Coding 🙂

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

When I think in getting solutions for my Ecommerce Platform, I think of Webkul. They have been such a blessing in our business. We have spent thousands of dollars in support and modules from them. We love their support team. They work very closely with us, and they always go the extra mile when we need help.

Michael Urresta

Michael Urresta

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home