How to listen to keyboard on screen Flutter?

Question

I am building a mobile app, I want to remove a widget when the keyboard appears on the screen, i.e when the input text field is on focus.

I have tried to use

Answer 1

You can use this simple check:

MediaQuery.of(context).viewInsets.bottom == 0

The keyboard is closed when this returns true, otherwise it's open. Be aware to take the context of the whole screen (Scaffold for example) and not only from one widget.

This is how you integrate that check to your code:

Visibility(
  child: Icon(Icons.add),
  visible: MediaQuery.of(context).viewInsets.bottom == 0,
)

Answer 2

You can use this library keyboard_visibility: ^0.5.6 at : https://pub.dev/packages/keyboard_visibility

For execute your code, insert this in the initState()

KeyboardVisibilityNotification.addNewListener( onChange: (bool visible) { print(visible); this.setState(() { keyboardIsOpen = visible; }); }, );

Whenever keyboard is open or closed, the library calls onChange method with the visibility boolean.

Answer 3

The keyboard will automatically appear when the text field is focused. So you can add a listner to the focusnode to listen the focus change and hide respective widget.

Example:

    void _listener(){
        if(_myNode.hasFocus){
          // keyboard appeared 
        }else{
          // keyboard dismissed
        }
    }

    FocusNode _myNode = new FocusNode()..addListener(_listner);

    TextField _myTextField = new TextField(
            focusNode: _mynNode,
            ...
            ...
        );

    new Container(
        child: _myTextField
    );

Answer 4

A widget that calls a callback whenever the user presses or releases a key on a keyboard.

A RawKeyboardListener is useful for listening to raw key events and hardware buttons that are represented as keys. Typically used by games and other apps that use keyboards for purposes other than text entry.

For text entry, consider using a EditableText, which integrates with on-screen keyboards and input method editors (IMEs).

 const RawKeyboardListener({
Key key,
@required FocusNode focusNode,
@required ValueChanged<RawKeyEvent> onKey,
@required Widget child
})

Creates a widget that receives raw keyboard events.

For text entry, consider using a EditableText, which integrates with on-screen keyboards and input method editors (IMEs).

Implementation

const RawKeyboardListener({
  Key key,
  @required this.focusNode,
  @required this.onKey,
  @required this.child,
}) : assert(focusNode != null),
     assert(child != null),
     super(key: key);

Answer 5

I used the package keyboard_visibility

Then I wrapped my TextField with a KeyboardListener implemented as follows:

class KeyboardListener extends StatefulWidget {
  final Widget child;
  final void Function(bool) onChange;
  KeyboardListener({@required this.child, @required this.onChange});
  @override
  _KeyboardListenerState createState() => _KeyboardListenerState();
}

class _KeyboardListenerState extends State<KeyboardListener> {
  int _sId;
  KeyboardVisibilityNotification _kvn;

  @override
  void initState() {
    super.initState();
    _kvn = KeyboardVisibilityNotification();
    _sId = _kvn.addNewListener(
      onChange: widget.onChange,
    );
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }

  @override
  void dispose() {
    _kvn.removeListener(_sId);
    super.dispose();
  }
}