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.
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.
|
1 2 3 4 |
GestureDetector( onTap: () {}, child: widget // MaterialApp ); |
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):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
GestureDetector( onTap: (){ FocusScopeNode currentFocus = FocusScope.of(context); if(!currentFocus.hasPrimaryFocus && currentFocus.focusedChild !=null) FocusManager.instance.primaryFocus!.unfocus(); }, child: MaterialApp( title: 'Flutter Demo', home: MyHomePage(title: 'Dismissing Keyboard'), ), ); |
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 🙂