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
Contact Us