WinningGreat / flutter_keyboard_visibility

Get notified on keyboard visibility changes in your Flutter app

Flutter Keyboard Visibility

React to keyboard visibility changes.

This is a fork, original project here.

Install

Add the dependency to your pubspec.yaml

dependencies:
  flutter_keyboard_visibility: ^3.2.1

Usage: React to Keyboard Visibility Changes

Option 1: Within your Widget tree

Build your Widget tree based on whether or not the keyboard is visible by including a KeyboardVisibilityProvider near the top of your tree.

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
  return KeyboardVisibilityProvider(
    child: MyDemoPage(),
  );
}

// Within MyDemoPage...
@override
Widget build(BuildContext context) {
  final bool isKeyboardVisible = KeyboardVisibilityProvider.isKeyboardVisible(context);
  return Text(
    'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
  );
}

Option 2: Direct query and subscription

Query and/or subscribe to keyboard visibility directly with the
KeyboardVisibility class.

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

@override
void initState() {
  super.initState();
  // Query
  print('Keyboard visibility direct query: ${KeyboardVisibility.isVisible}');
  
  // Subscribe
  KeyboardVisibility.onChange.listen((bool visible) {
    print('Keyboard visibility update. Is visible: ${visible}');
  });
}

Usage: Dismiss keyboard on tap

Place a KeyboardDismissOnTap near the top of your Widget tree. When a user taps outside of the currently focused Widget, the Widget will drop focus and the keyboard will be dismissed.

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
  return KeyboardDismissOnTap(
    child: MyDemoPage(),
  );
}