How can I dismiss the on screen keyboard

Question

I am collecting user input with a TextFormField and when the user presses a FloatingActionButton indicating they are done  I want to dismiss the on screen keyboard   How do I make the keyboard go away automatically   import  package flutter material dart    class MyHomePage extends StatefulWidget     MyHomePageState createState     gt  new MyHomePageState       class MyHomePageState extends State lt MyHomePage gt      TextEditingController  controller   new TextEditingController        override   Widget build BuildContext context        return new Scaffold        appBar  new AppBar          floatingActionButton  new FloatingActionButton          child  new Icon Icons send           onPressed                 setState                     send message                dismiss on screen keyboard here              controller clear                                            body  new Container          alignment  FractionalOffset center          padding  new EdgeInsets all 20 0           child  new TextFormField            controller   controller            decoration  new InputDecoration labelText   Example Text                                      class MyApp extends StatelessWidget      override   Widget build BuildContext context        return new MaterialApp        home  new MyHomePage                  void main       runApp new MyApp

User · Answer

Just use  Focus of context  unfocus     All about Focus in Flutter here - gt  enter link description here

User · Answer

You can also declare a focusNode for you textfield and when you are done you can just call the unfocus method on that focusNode and also dispose it class MyHomePage extends StatefulWidget     MyHomePageState createState     gt  new MyHomePageState       class MyHomePageState extends State lt MyHomePage gt      TextEditingController  controller   new TextEditingController         declare focus   final FocusNode  titleFocus   FocusNode        override   void dispose          titleFocus dispose            override   Widget build BuildContext context        return new Scaffold        appBar  new AppBar          floatingActionButton  new FloatingActionButton          child  new Icon Icons send           onPressed                 setState                     send message                dismiss on screen keyboard here               titleFocus unfocus                 controller clear                                            body  new Container          alignment  FractionalOffset center          padding  new EdgeInsets all 20 0           child  new TextFormField            controller   controller            focusNode   titleFocus            decoration  new InputDecoration labelText   Example Text

User · Answer

You can use unfocus   method from FocusNode class   import  package flutter material dart    class MyHomePage extends StatefulWidget     MyHomePageState createState     gt  new MyHomePageState       class MyHomePageState extends State lt MyHomePage gt      TextEditingController  controller   new TextEditingController      FocusNode  focusNode   new FocusNode      1 - declare and initialize variable     override   Widget build BuildContext context        return new Scaffold        appBar  new AppBar          floatingActionButton  new FloatingActionButton          child  new Icon Icons send           onPressed                    focusNode unfocus      3 - call this method here                           body  new Container          alignment  FractionalOffset center          padding  new EdgeInsets all 20 0           child  new TextFormField            controller   controller            focusNode   focusNode    2 - assign it to your TextFormField           decoration  new InputDecoration labelText   Example Text                                      class MyApp extends StatelessWidget      override   Widget build BuildContext context        return new MaterialApp        home  new MyHomePage                  void main       runApp new MyApp

User · Answer

Solution with FocusScope doesn t work for me  I found another   import  package flutter services dart    SystemChannels textInput invokeMethod  TextInput hide      It solved my problem

User · Answer

try using a text editing controller  at the begining       final myController   TextEditingController          override   void dispose            Clean up the controller when the widget is disposed      myController dispose        super dispose          and in the on press event   onPressed                   commentController clear       this will dismiss the keybord

User · Answer

Looks like different approaches for different version  I am using Flutter v1 17 1 and the below works for me    onTap           FocusScopeNode currentFocus   FocusScope of context       if   currentFocus hasPrimaryFocus  amp  amp  currentFocus focusedChild    null           currentFocus focusedChild unfocus

User · Answer

The example implementation of  unfocus   to auto hide keyboard when scrolling a list  FocusScope of context  unfocus      you can find at  https   github com flutter flutter issues 36869 issuecomment-518118441  Thanks to szotp

User · Answer

None of the above solutions don t work for me    Flutter suggests this -  Put your widget inside new GestureDetector   on which tap will hide keyboard and onTap use FocusScope of context  requestFocus new FocusNode     class Home extends StatelessWidget    override   Widget build BuildContext context        var widget   new MaterialApp          home  new Scaffold              body  new Container                  height 500 0                  child  new GestureDetector                      onTap                               FocusScope of context  requestFocus new FocusNode                                                child  new Container                          color  Colors white                          child   new Column                              mainAxisAlignment   MainAxisAlignment center                              crossAxisAlignment  CrossAxisAlignment center                               children                                    new TextField                                     new Text  Test                                                                                                                                                                          return widget

User · Answer

Following code helped me to hide keyboard      void initState        SystemChannels textInput invokeMethod  TextInput hide       super initState

User · Answer

This may simplify the case  Below code will work only if keyboard is open if FocusScope of context  isFirstFocus     FocusScope of context  requestFocus new FocusNode

User · Answer

To dismiss the keyboard  1 7 8 hotfix 2 and above  just call the method below  FocusScope of context  unfocus     Once the FocusScope of context  unfocus   method already check if there is focus before dismiss the keyboard it s not needed to check it  But in case you need it just call another context method   FocusScope of context  hasPrimaryFocus

User · Answer

GestureDetector            onTap                   FocusScope of context  unfocus                           child Container      alignment  FractionalOffset center      padding  new EdgeInsets all 20 0       child  new TextFormField        controller   controller        decoration  new InputDecoration labelText   Example Text                     try this on tap gesture

User · Answer

For Flutter 1 17 3  stable channel as of June 2020   use   FocusManager instance primaryFocus unfocus

User · Answer

As in Flutter everything is a widget  I decided to wrap the SystemChannels textInput invokeMethod  TextInput hide    and the FocusScope of context  requestFocus FocusNode     approach in a short utility module with a widget and a mixin in it   With the widget  you can wrap any widget  very convenient when using a good IDE support  with the KeyboardHider widget   class SimpleWidget extends StatelessWidget      override   Widget build BuildContext context        return KeyboardHider           Here comes a widget tree that eventually opens the keyboard           but the widget that opened the keyboard doesn t necessarily          takes care of hiding it  so we wrap everything in a          KeyboardHider widget          child  Container                   With the mixin  you can trigger hiding the keyboard from any state or widget upon any interaction   class SimpleWidget extends StatefulWidget      override    SimpleWidgetState createState     gt   SimpleWidgetState       class  SimpleWidgetState extends State lt SimpleWidget gt  with KeyboardHiderMixin      override   Widget build BuildContext context        return RaisedButton        onPressed                  Hide the keyboard          hideKeyboard               Do other stuff  for example             Update the state  make an HTTP request                              Just create a keyboard hider dart file and the widget and mixin are ready to use   import  package flutter material dart   import  package flutter services dart        Mixin that enables hiding the keyboard easily upon any interaction or logic     from any class  abstract class KeyboardHiderMixin     void hideKeyboard       BuildContext context      bool hideTextInput   true      bool requestFocusNode   true             if  hideTextInput          SystemChannels textInput invokeMethod  TextInput hide              if  context    null  amp  amp  requestFocusNode          FocusScope of context  requestFocus FocusNode                      A widget that can be used to hide the text input that are opened by text     fields automatically on tap          Delegates to  KeyboardHiderMixin  for hiding the keyboard on tap  class KeyboardHider extends StatelessWidget with KeyboardHiderMixin     final Widget child         Decide whether to use        SystemChannels textInput invokeMethod  TextInput hide           to hide the keyboard   final bool hideTextInput    final bool requestFocusNode         One of hideTextInput or requestFocusNode must be true  otherwise using the       widget is pointless as it will not even try to hide the keyboard    const KeyboardHider       Key key       required this child      this hideTextInput   true      this requestFocusNode   true          assert child    null           assert hideTextInput    requestFocusNode           super key  key       override   Widget build BuildContext context        return GestureDetector        behavior  HitTestBehavior opaque        onTap               hideKeyboard            context  context            hideTextInput  hideTextInput            requestFocusNode  requestFocusNode                            child  child

User · Answer

Note  This answer is outdated  See the answer for newer versions of Flutter   You can dismiss the keyboard by taking away the focus of the TextFormField and giving it to an unused FocusNode   FocusScope of context  requestFocus FocusNode

User · Answer

dismissKeyboard BuildContext context       FocusScope of context  requestFocus new FocusNode         override Widget build BuildContext context     return new GestureDetector      onTap           this  dismissKeyboard context              child  new Container      color  Colors white      child  new Column          children   lt Widget gt

User · Answer

As of Flutter v1 7 8 hotfix 2  the way to go is   FocusScope of context  unfocus     Comment on PR about that      Now that  31909  be75fb3  has landed  you should use   FocusScope of context  unfocus   instead of   FocusScope of context  requestFocus FocusNode     since FocusNodes are   ChangeNotifiers  and should be disposed properly    -  DO NOT use  r e q u e s t F o c u s   F o c u s N o d e      anymore    F o c u s S c o p e   o f   c o n t e x t     r e q u e s t F o c u s   F o c u s N o d e

User · Answer

FocusScope of context  unfocus   has a downside when using with filtered listView  Apart from so many details and concisely  use keyboard dismisser package in https   pub dev packages keyboard dismisser will solve all the problems

User · Answer

To summarize  this is a working solution for Flutter 1 17  Wrap your Widget like this  GestureDetector          onTap  FocusScope of context  unfocus          child  YourWidget

User · Answer

For me  the Listener above App widget is the best approach I ve found  Listener    onPointerUp            FocusScopeNode currentFocus   FocusScope of context       if   currentFocus hasPrimaryFocus  amp  amp  currentFocus focusedChild    null          currentFocus focusedChild unfocus                 child  MaterialApp      title   Flutter Test App       theme  theme

[dart] How can I dismiss the on screen keyboard?

Examples related to dart

Examples related to flutter