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 RawKeyboardListener but that doesn't seem to work, my code is as below:

new Container(
  child: new RawKeyboardListener(
    focusNode: new FocusNode(),
    onKey: (input) => debugPrint("*****KEY PRESSED"),
    child: new TextField(
      controller: new TextEditingController(),
    ),
  ),
);

check out this answer: https://stackoverflow.com/a/63505397/10020712 — Abdurahman Popal, Aug 20 '20 at 12:45

score 18 · Answer 1 · answered Feb 27 '20 at 14:21

18

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,
)

answered Feb 27 '20 at 14:21

Benjamin Menrad

898
10
14

simple and clean – Bilal Şimşek Oct 27 '20 at 08:10
Best answer. Thank you – gordonturibamwe Apr 30 '21 at 13:21
2

I tested and used it successfully for Android and iOS devices. – Benjamin Menrad Jul 21 '21 at 09:00
Simple & clean approach. Tnxx – Sharath B Naik Feb 15 '22 at 10:30

score 9 · Answer 2 · answered Dec 15 '17 at 06:40

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

unfortunately this doesn't work when the keyboard is dismissed seems like the TextField doesn't loose the focus — Thomas, Mar 27 '18 at 15:43

score 3 · Answer 3 · answered Jun 22 '20 at 05:25

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

The package breaks for Android devices. The maintainer won't fix it. https://github.com/MisterJimson/flutter_keyboard_visibility/issues/74 — Oliver Dixon, Jul 18 '21 at 13:20

score 2 · Answer 4 · answered Sep 05 '19 at 08:44

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.

hararot so · Answer 5 · 2023-05-30T23:02:29.597

Check the condition if the keyboard is open or not, you could use WidgetsBinding.instance.window.viewInsets.bottom , answered by Deepak Raj

OR you could use: KeyboardVisibilityBuilder

answered by Andrey Gordeev

KeyboardVisibilityBuilder(
    builder: (context, child, isKeyboardVisible) {
      if (isKeyboardVisible) {
        // when keyboard is visible
        return mChild;
      } else {
        // when keyboard is invisible
        return SizedBox.shrink();
      }
      
    },
    child: mChild,
  )

score -1 · Answer 6 · answered Feb 07 '19 at 18:00

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

How to listen to keyboard on screen Flutter?

6 Answers6

OR you could use: KeyboardVisibilityBuilder

Linked