How to Dismiss the Keyboard in Flutter?

Hello Guys How are you all? Hope you all are fine. Many times we need to dismiss the keyboard on the outside tap of textfield. Here we are going to learn How to Dismiss the Keyboard in Flutter. So today Here I come with a tutorial on How to Dismiss the Keyboard in Flutter?

How to Dismiss the Keyboard in Flutter?

Detect the tap

First Of all, we need to implement we the need to detect the tap. Where anyone tap and at that time keyboard should be dismissed?

suppose we have Textfield in our App And when someone taps on it outside of TextField, the Keyboard must have to dismiss. So our Tap is our body. When someone taps on the body keyboard should be dismissed.

For our use case, we’re going to be implementing the onTap handler.

              GestureDetector(
                onTap: () {},
                child: Container(
                  height: 30,
                  width: 100,
                  child: Center(
                    child: Text(
                      "Login",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17,
                      ),
                    ),
                  ),
                  color: Colors.black,
                ),
              )

Dismiss the Keyboard

You can dismiss the keyboard by taking away the focus of the TextFormField and giving it to an unused FocusNode:

To trigger the keyboard to dismiss itself, we need to remove “focus” from our text field. By removing the current focus from the text field’s FocusNode, we can achieve the desired result.

Here is My example.

              GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: Container(
                  height: 30,
                  width: 100,
                  child: Center(
                    child: Text(
                      "Login",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17,
                      ),
                    ),
                  ),
                  color: Colors.black,
                ),
              )

Source code.

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart ';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:fluttercorner_app/SecondScreen.dart';

void main() {
  runApp(
    new MaterialApp(
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Dismiss the Keyboard - FlutterCorner'),
        backgroundColor: Colors.green,
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus();
        },
        child: Container(
          height: size.height,
          width: size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: TextFormField(
                  decoration: InputDecoration(labelText: 'Enter Email Address'),
                ),
              ),
              GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: Container(
                  height: 30,
                  width: 100,
                  child: Center(
                    child: Text(
                      "Login",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17,
                      ),
                    ),
                  ),
                  color: Colors.black,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output

Faq

Summery

So it’s all About All possible Methods. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• How to request and check permissions in Flutter ?
• How to Work With Progress Indicator In Flutter ?
• Also Read How to Set default value for dropdown button in flutter?
• Multiple selections inside the dropdown menu in Flutter
• Drop down button in flutter not switching values to the selected value