Flutter – Detect Keyboard is Open or Closed and Its Height
Last Updated :
09 Jan, 2024
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;
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 ,
...
}
|
Solution 2: Provide Animated container when user opens the keyboard
Dart
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) {
...
}
|
Output:
Before handling this issue
After handling the issue
Share your thoughts in the comments
Please Login to comment...