Detect Keyboard Visibility In Flutter App

In this post, we will learn how we can detect keyboard visibility in flutter application.

Introduction

In Flutter, user input fields like TextField automatically pops up keyboard when in focus. Similarly, the keyboard hides itself when you move the focus to a different widget or press back button.

Now, if you want to keep track of the keyboard open/close event, how do you do so?

MediaQuery To The Rescue

In Flutter, we can lookup device properties like size with the help of MediaQuery widget. As it extends an InheritedWidget, MediaQuery can propagate this information even during run-time anywhere within the application.

Learn More: Basics Of Inherited Widget

Use the viewInsets property of the MediaQuery class to get the part of mobile device which is hidden by the device’s keyboard.

So, you can use this property in your code like this:

Detect Keyboard Visibility In Flutter
Detect Keyboard Visibility In Flutter

Full Demo App

Code for the demo above:

Here, a text label is updated based upon keyboard open/close state.

MediaQuery Isn’t Working

When using the MediaQuery.of(context) method, it is important to realize that in Flutter every widget gets it’s own unique BuildContext.

So, if your widget is inside a different widget, you will notice that the solution above will not work.

For example:

Become A Flutter Expert With This Course

Here, AnotherWidget is inside the _MyHomePageState widget. With respect to AnotherWidget context, the keyboard isn’t obscuring any part of the device. So the code above will always show “Keyboard is not visible” as MediaQuery.of(context).viewInsets.bottom will always return 0.0.

For this reason you will not be able to detect keyboard open/close using the MediaQuery of AnotherWidget context.

So how to detect keyboard open/close visibility if MediaQuery.of(context).viewInsets.bottom isn’t working?

Solution

Since, the context from AnotherWidget isn’t able to give us the right answer. In such condition, compare the viewInsets of the parent widget.

For example you could do something like this:

  • Get the height of parent container widget first. You can get this heigh using MediaQuery.
  • Pass the height of parent as parameter to child widget.
  • In the child widget (AnotherWidget) compare the parent widget’s height with the current height.

Wrapping Up

In this post we saw how we can detect keyboard visibility in a Flutter app. We looked at how to properly use MediaQuery for this purpose.

Don’t forget to checkout out our other articles!

About the author