Search code examples
flutterdartkeyboardhide

How to hide soft input keyboard on flutter after clicking outside TextField/anywhere on screen?


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?


Solution

  • 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