Flutter – How to Hide Soft Input Keyboard After Clicking Outside TextField

dartflutterhidekeyboard

Currently, I know the method of hiding the soft keyboard using this code, by onTap methods of any widget.

FocusScope.of(context).requestFocus(new FocusNode());

But I want to hide the soft keyboard by clicking outside of TextField or anywhere on the screen. Is there any method in flutter to do this?

Best Answer

You are doing it in the wrong way, just try this simple method to hide the soft keyboard. you just need to wrap your whole screen in the GestureDetector method and onTap method write this code.

FocusScope.of(context).requestFocus(new FocusNode());

Here is the complete example:

new Scaffold(
   body: new GestureDetector(
      onTap: () {
         FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: new Container(
         //rest of your code write here
      ),
   ),
)

Updated (May 2021)

return GestureDetector(
   onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
   child: Scaffold(
      appBar: AppBar(
         title: Text('Login'),
      ),
      body: Body(),
   ),
);

This will work even when you touch the AppBar, new is optional in Dart 2. FocusManager.instance.primaryFocus will return the node that currently has the primary focus in the widget tree.

Conditional access in Dart with null-safety

Related Question