Get keyboard height in Flutter

Question

Is there any way to get an open keyboard's height in Flutter? I'm trying to pad a bottomSheet widget by the height of the keyboard while it's open.

Answer 1

Usually viewInsets provides data about any system ui that obscures the flutter ui. To know about the keyboard height, you can just check for the bottom property of viewInsets, when the keyboard is onscreen, this will hold the height of keyboard else zero.

You can check for the viewInsets with MediaQuery like:

MediaQuery.of(context).viewInsets.bottom

Note: The bottom property may have value even if some other system ui obscures the flutter ui from bottom.

Hope that helps!

Answer 2

The MediaQuery.of(context).viewInsets solution does not work for me. It always says zero even if keyboard is open. Moreover, looking at the highest-upvoted comment in this answer, it is a bad idea to use it as keyboard indicator.

Thus, here is a one-line solution:

final viewInsets = EdgeInsets.fromWindowPadding(WidgetsBinding.instance.window.viewInsets,WidgetsBinding.instance.window.devicePixelRatio);

Then do whatever you want (e.g. viewInsets.bottom is keyboard height) :)

---

EDIT: https://api.flutter.dev/flutter/dart-ui/FlutterView-class.html is a good source to see how keyboard affects various kinds of padding.

Answer 3

This one work for me: https://pub.dev/packages/keyboard_utils

Sample code from package:

Answer 4

In case of complicated widget tree MediaQuery.of(context).viewInsets.bottom gives null even if the keyboard is open. So, we have to mutate values down the tree.

I made the package that provides all needed info down the tree https://pub.dev/packages/flutter_keyboard_size

Welcome to use and in case you find bugs or want to extend functionality please add the issue https://github.com/awaik/flutter_keyboard_size/issues

Answer 5

In case you need to get the keyboard height even when the keyboard is not open, you can use the flutter_persistent_keyboard_height package (note: it was created by me).

First thing you need to do is wrap a widget from children of which you want to get the keyboard height with PersistentKeyboardHeightProvider. Wrap your app widget (perhaps MaterialApp) if you want to get keyboard height from all widgets.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Persistent Keyboard Height Example',
      home: const FlutterPersistentKeyboardHeightExample(),
      builder: (context, child) => PersistentKeyboardHeightProvider(
        child: child!,
      ),
    );
  }
}

And after that you can use the PersistentKeyboardHeight.of(context).keyboardHeight to get the height.

Answer 6

If MediaQuery.of(context).viewInsets.bottom shows 0.0, this should work:

First, go into your Scaffold and set this:

resizeToAvoidBottomInset: false,

THEN you can check the height of the keyboard in this way:

MediaQuery.of(context).viewInsets.bottom,

Answer 7

In my case nothing worked, but I needed screen height without keyboard height and LayoutBuilder work perfect.

LayoutBuilder(
  builder: (context, constraints) => Container(
    //maxHeight will change depending on your keyboard visible or not
    height:constraints.maxHeight,
  ),
);

In theory you can do this

LayoutBuilder(
  builder: (context, constraints) {
    double keyboardHeight = MediaQuery.of(context).size.height - constrains.maxHeight;
  }
);