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: ...,
  ),
);
  1. 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: ...
  ),
);
  1. 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:

flutter hide keyboard- Keyboard
Keyboard

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!

Related articles

Top 5 Business Listing App Template

The Top 5 Business App Template is made for...

Things To Remember For A Flutter Developer Resume | Mind-blowing

This article will enlighten you about how to write...

How to Change the Text Color in Flutter | Change Color of Text in 2023

In this article, we will explore how to change...

Top 5 Best Listing Mobile Directory Apps & Templates in 2023

What are the best Listing Mobile Directory Apps &...

How to Use Path Provide Flutter with Read Write Example in 2023

Path Provider Flutter is a Flutter package for finding...

Case Studies

Case Study: English Booster App

Flutter Service, your go-to for cutting-edge mobile applications, has once again stepped up to the challenge with the English Booster App. Our skilled team...
eDental App

Case Study: eDental Dentist App

Our team recently embarked on an exciting project to develop the eDental Dentist App, a cutting-edge mobile application designed for both Android and iOS...

App Competitor Analysis & Factors

EEE Engineers apps approached us to conduct a thorough competitor analysis, aiming to enhance their app's ranking. By utilizing our expertise, we meticulously audited...