How can I dismiss the on screen keyboard?

flutter hide keyboard on tap outside
flutter keyboard done button
flutter textfield disable keyboard
flutter keyboard dismiss event
flutter keyboard listener
focusnode flutter
create a keyboard in flutter
flutter hardware keyboard

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() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  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());
}

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());

How to Dismiss the Keyboard in Flutter the Right Way, Tapping outside of a form field in Flutter doesn't dismiss the keyboard by default. So how do we The behavior should be accessible on any screen in our app. Scroll down until you find the "Keyboards" section, and click to expand it. 3. Click on the keyboard you want to disable, then right-click it to reveal a list of options. Don't worry about losing

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.

How to hide the On-Screen Keyboard?, how can I hide the on-screen keyboard. I never use it and have to close it every time I open the computer. Like you said, you can back out and go in again to dismiss keyboard. Other option is to tap the 'edit' button on top right. That will dismiss keyboard but it will go in edit mode. When you cancel out of edit mode keyboard will come back.

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.

How do i dismiss keyboard when clicked outside of the textfield , the current behavior: Does "stopped working" that above code doesn't release focus and the keyboard stays on screen? //Simple exercise to demonstrate, assuming the view controller has a //Textfield, Button and a Label. And that the label should display the //userinputs when button clicked. And if you want the keyboard to disappear //when clicken anywhere on the screen + upon clicking Return key in the //keyboard.

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;
}}

Dismissing keyboard programatically · Issue #7247 · flutter/flutter , I use RenderBox to figure this out, but the keyboard remaining on screen screws up measurements. If I stick an await new Future.delayed() after dismissing the  Go to Start, then select Settings > Ease of Access > Keyboard, and turn on the toggle under Use the On-Screen Keyboard. A keyboard that can be used to move around the screen and enter text will appear on the screen. The keyboard will remain on the screen until you close it.

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() => _SimpleWidgetState();
}

class _SimpleWidgetState extends State<SimpleWidget> 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 && 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,
    );
  }
}

Windows 10: Enable/Disable On-Screen Keyboard, Windows Vista & 7 users can go to Start, run “msconfig“, then check under the “​Startup” tab to disable (uncheck) any keyboard software that might be running. Turn On or Off On-Screen Keyboard in Settings 1 Open Settings, and click/tap on the Ease of Access icon. 2 Click/tap on Keyboard on the left side, and turn on or off (default) Use the On-Screen Keyboard for what you want on the right side.

Use the on-screen keyboard on Pixel Slate, When your device is in tablet mode, open your on-screen keyboard by tapping any text box. To hide the keyboard, tap Hide keyboard . If you open the on-screen​  On Windows 7, you can open the on-screen keyboard by clicking the Start button, selecting “All Programs,” and navigating to Accessories > Ease of Access > On-Screen Keyboard. You’ll also find a “Start On-Screen Keyboard” button in the Control Panel’s Ease of Access Center, but that does the same thing as launching the keyboard directly.

How to Disable On Screen Keyboard in Windows 10 at Startup , hi,. You can dismiss the keyboard by taking away the focus of the TextFormField and giving it to an unused FocusNode : You need to add a transparent UIVIew as a subview below the keyboard and handle touches there, to dismiss the keyboard. Below code is for your reference.

KONTAKT - Show/Hide the On-Screen Keyboard, Select the Keyboard tab, and turn on the ‘Use the on-screen keyboard’ switch. This will enable the on-screen keyboard and it will remain visible no matter where you click. You can also enable/disable it with the Win+Ctrl+O keyboard shortcut.

Comments
  • Collin, The second answer from @Pascal should be the updated, corrected answer.
  • Where would you implement this code? In the TextFormField; maybe after onChanged: or in the action of your custom button?
  • @CharlesJr I do it in the action of my button.
  • you can use my package if you want :) pub.dartlang.org/packages/keyboard_actions
  • Is there any way to do this when the user uses swipe to pop the route? Using a CupertinoRoute
  • This is before Flutter v1.7.8 - see answer stackoverflow.com/a/56946311/8696915 which gives FocusScope.of(context).unfocus()
  • Worked for me on hotfix v1.7.8+hotfix.4
  • work for me, this answer should be masked as the correct one
  • This does not work always (accepted answer does).
  • @kine can you please elaborate? A per documentation, this is the way to do (see api.flutter.dev/flutter/widgets/FocusNode/unfocus.html )
  • @Pascal Yes I have read the documentation and this would have been my preferred solution, but in my app it doesn't work always (a quite complex form with several TextFields and other edit widgets). I don't know why but sometimes unfocus has not any effect. Replacing it with the accepted solution (no other changes) fixes the issue. Maybe it's related to the location where unfocus is called from. I need to call it e.g. from CheckBoxListTile.onChanged to dismiss keyboard when user interacts with a checkbox widget, and from other similar locations. I don't remember exact issue location.
  • Calling this doesn't hide the keyboard for me. Should it work on both Android and iOS?