How To Flutter Hide Keyboard Easily? 3 Crazy Steps in 2023

This article enlightens you about how to Flutter hide keyboard.

If you click somewhere at the top of the screen, then it should automatically Flutter hide keyboard because not every device has a back button at the bottom to dismiss the keyboard. 

• Alternatively, you will learn how to scroll also to the Flutter hide keyboard. 
• Let’s start by tapping here anywhere on the screen to dismiss our keyboard. This is pretty simple.

People, who read this article also read: Flutter Liquid Swipe Animation

In Flutter, TextField is a viral widget. A keyboard appears on-screen when you click on the TextField. You must press the back button on an Android device or the done button (located inside the onscreen keyboard) on an iOS device to hide or dismiss the keyboard. However, the issue is that while using the app, some Android phones hide the virtual (on-screen) back button, and iOS doesn’t display the done button when the numeric keyboard is open. We will therefore examine how to do so in Flutter in this article.

Method For Flutter Hide Keyboard

Using the FocusManager.instance.primaryFocus?.unfocus() method inside the GestureDetector’s onTap function, we’ll hide or dismiss the keyboard whenever a user touches anywhere on the screen.

Procedures for Flutter users to close or conceal the on-screen keyboard

1. Wrap the GestureDetector around your widget as the first step, which should be the scaffold widget. When it comes to identifying different gestures like onTap, onDoubleTap, onLongPress, etc., the GestureDetector is incredibly helpful. 

Code should now appear as follows:

GestureDetector(
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Close Keyboard Demo'),
    ),
    body: ...,
  ),
);

2. The onTap callback should be added so that we can identify single-touch events on the screen.

Here is the most recent code:

GestureDetector(
  onTap: () {},
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Close Keyboard Demo'),
      backgroundColor: Color(0xff6ae792),
    ),
    body: ...
  ),
);

3. Last but not least, include the FocusManager.instance.primaryFocus?.unfocus() method to turn off the keyboard.

The Code:

GestureDetector(
  onTap: () {
    FocusManager.instance.primaryFocus?.unfocus();
  },
  child: Scaffold(
    appBar: AppBar(
      title: const Text('Close Keyboard Demo'),
      backgroundColor: Color(0xff6ae792),
    ),
    body: ...
  ),
);

If any TextField is currently in Focus, the FocusManager.instance.primaryFocus?.unfocus() function first verifies that it is. The on-screen keyboard is closed if TextField has the focus. If it doesn’t, it returns the focus to TextField.

The keyboard is discarded in the following manner:

Here’s the Complete code of the flutter hide keyboard:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: CloseKeyboardDemo(),
    );
  }
}
class CloseKeyboardDemo extends StatelessWidget {
  const CloseKeyboardDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Close Keyboard Demo'),
        ),
        body: Container(
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.all(16),
                child: TextField(
                  //keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(), labelText: 'Enter value'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

We learned step-by-step instructions on how to flutter hide keyboard in this tutorial. With a tap anywhere on the screen, the GestureDetector will enclose the entire screen and switch the focus away from the TextField.

Are there any additional engaging Flutter tutorials you’d like to check out? Take a look at more tutorials here!