Flutter Keyboard listen on hide and show

Question

How can I listen whether the keyboard is showing up or hiding?

I tried this example How to listen to keyboard on screen Flutter?

 void _listener(){     if(_myNode.hasFocus){       // keyboard appeared      }else{       // keyboard dismissed     } }  FocusNode _myNode = new FocusNode()..addListener(_listner);  TextField _myTextField = new TextField(         focusNode: _mynNode,         ...         ...     ); 

But unfortunately it doesn't work. Any ideas how it could be possible to listen to the keyboard change?

It seems like it works when I press "Done" on the keyboard. But if i press back on my phone it won't go to "keyboard dismissed" because the focus still exists.. Any help?

Answer 1

KeyboardVisibilityBuilder

Listening for keyboard show/hide events can be achieved with WidgetsBindingObserver mixin. I prepared KeyboardVisibilityBuilder widget that handles the behavior for you. The usage is quite similar to AnimatedBuilder:

return KeyboardVisibilityBuilder(   builder: (context, child, isKeyboardVisible) {     if (isKeyboardVisible) {       // build layout for visible keyboard     } else {       // build layout for invisible keyboard     }   },   child: child, // this widget goes to the builder's child property. Made for better performance. ); 

KeyboardVisibilityBuilder implementation:

/// Calls `builder` on keyboard close/open. /// https://stackoverflow.com/a/63241409/1321917 class KeyboardVisibilityBuilder extends StatefulWidget {   final Widget child;   final Widget Function(     BuildContext context,     Widget child,     bool isKeyboardVisible,   ) builder;    const KeyboardVisibilityBuilder({     Key key,     this.child,     @required this.builder,   }) : super(key: key);    @override   _KeyboardVisibilityBuilderState createState() => _KeyboardVisibilityBuilderState(); }  class _KeyboardVisibilityBuilderState extends State<KeyboardVisibilityBuilder>     with WidgetsBindingObserver {   var _isKeyboardVisible = false;    @override   void initState() {     super.initState();     WidgetsBinding.instance.addObserver(this);   }    @override   void dispose() {     WidgetsBinding.instance.removeObserver(this);     super.dispose();   }    @override   void didChangeMetrics() {     final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;     final newValue = bottomInset > 0.0;     if (newValue != _isKeyboardVisible) {       setState(() {         _isKeyboardVisible = newValue;       });     }   }    @override   Widget build(BuildContext context) => widget.builder(         context,         widget.child,         _isKeyboardVisible,       ); }