Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 126.96.36.199 release ready!
Updated 27 April 2023
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?
Check our Flutter app development page.
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 🙂
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.