35.2 C
New York
Tuesday, August 9, 2022

Flutter: Programmatically Check Soft Keyboard Visibility

- Advertisement -

This practical article shows you two different ways to programmatically detect whether the soft keyboard is showing up or not in a Flutter application. The first approach uses self-written code and the second one uses a third-party library.

Using MediaQuery

When the soft keyboard is hidden, the bottom viewInsets is zero. Otherwise, it will be a positive number:Advertisements

MediaQuery.of(context).viewInsets.bottom == 0  
    ? /* Soft keyboard is currently invisible */
    : /* Soft keyboard is showing up */

For more clarity, see the example below.

Example Preview

This sample app contains a text field. When the text field is focused, the soft keyboard will show up, and you will see the blue text “Keyboard is visible.” Otherwise, you will see the red text “Keyboard is hidden.”

Here’s how it works:

The Complete Code

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'KindaCode.com',
        theme: ThemeData(
          primarySwatch: Colors.amber,
        ),
        home: const HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Column(
          children: [
            const TextField(),
            const SizedBox(height: 30),
            MediaQuery.of(context).viewInsets.bottom == 0
                ? const Text(
                    'Keyboard is hidden',
                    style: TextStyle(fontSize: 24, color: Colors.red),
                  )
                : const Text(
                    'Keyboard is visible',
                    style: TextStyle(fontSize: 24, color: Colors.blue),
                  )
          ],
        ),
      ),
    );
  }
}

Using a third-party package

AdvertisementsThere are several packages that can help us determine if the soft keyboard is open or close, such as flutter_keyboard_visibility, keyboard_visibility, and keyboard_utils. The example below will use flutter_keyboard_visbility.

App Preview

The Code

1. Install the plugin by running:

flutter pub add flutter_keyboard_visibility

Then execute:

flutter pub get
Advertisements

2. The full source code in main.dart:

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // Wrap MaterialApp with KeyboardVisibilityProvider
    return KeyboardVisibilityProvider(
      child: MaterialApp(
          // Remove the debug banner
          debugShowCheckedModeBanner: false,
          title: 'KindaCode.com',
          theme: ThemeData(
            primarySwatch: Colors.indigo,
          ),
          home: const HomePage()),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    final bool isVisible =
        KeyboardVisibilityProvider.isKeyboardVisible(context);
    return Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Column(
          children: [
            const TextField(
              decoration: InputDecoration(border: OutlineInputBorder()),
            ),
            const SizedBox(height: 30),
            Text(
              isVisible ? 'Visible' : 'Invisible',
              style: const TextStyle(fontSize: 30),
            )
          ],
        ),
      ),
    );
  }
}

Conclusion

You’ve learned a couple of different techniques to check the soft keyboard visibility. If you’d like to explore more new and exciting stuff about the modern Flutter world, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Advertisements
- Advertisement -

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles