Flutter – Detect Keyboard is Open or Closed and Its Height

In this article, we will learn how we can check if the device keyboard is open or not in flutter. These are very basic things we will not require that much as very high-level requests but to give users a friendly experience we should know about it. Let’s understand its use cases

• When the keyboard opens it hides behind the keyboard
• When the keyboard opens it gives a rendering issue and gives black and yellow stripes at the bottom in debug mode or a grey screen in release mode

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Create any stateless or stateful widget.

To find the keyboard size and whether it is open or not we need buildcontext that is why we need stateful and stateless widgets.

How to find the keyboard size:

Dart

final bottomInsets = MediaQuery.of(context).viewInsets.bottom;
// or
final bottomInsets=WidgetsBinding.instance!.window.viewInsets.bottom

To find it is open you can check if its value is not equal to zero

Dart

bool isKeyboardOpen = bottomInsets != 0;

Complete Source Code

Dart

import 'package:flutter/material.dart';

class CheckKeyboardScreen extends StatefulWidget {
  const CheckKeyboardScreen({super.key});

  @override
  State<CheckKeyboardScreen> createState() => _CheckKeyboardScreenState();
}

class _CheckKeyboardScreenState extends State<CheckKeyboardScreen> {
  @override
  Widget build(BuildContext context) {
    final bottomInsets = MediaQuery.of(context).viewInsets.bottom;
    bool isKeyboardOpen = bottomInsets != 0;

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 18.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextFormField(),
            const SizedBox(
              height: 10,
            ),
            Text(
              "Is Keyboard Open : $isKeyboardOpen",
              style: const TextStyle(fontSize: 24),
            ),
            Text(
              "Keyboard Height : $bottomInsets",
              style: const TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

Problem we can solve from this

• When textformfield is at bottom of screen and we cannot able to see what we are typing
• In bottomsheet we have providng the textformfield but we cannot able to see the textfield properly

Solution 1: resizeToAvoidBottomInset: true

Dart

Scaffold(
      resizeToAvoidBottomInset: true,
  ...// other widgets
}

Solution 2: Provide Animated container when user opens the keyboard

Dart

// WidgetsBinding.instance!.window.viewInsets.bottom will also let you know about keyboard size
if (WidgetsBinding.instance!.window.viewInsets.bottom > 0.0)
                                    AnimatedContainer(
                                        height: MediaQuery.of(context)
                                            .viewInsets
                                            .bottom,
                                        duration: const Duration(seconds: 1))

Solution 3: Provide Bottom Padding to widget

Dart

Padding(
        padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
  child:...)

Solution 4: When textfield is inside bottom sheet

Dart

showModalBottomSheet(
       context: context,
       isScrollControlled: true,
       builder: (context) {

       ...//Widget in bottom sheet
         }

Output:

Before handling this issue

After handling the issue