Skip to content
Related Articles

Related Articles

How to Dismiss the Virtual Keyboard in a Flutter App?

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Aug, 2022

We all have faced situations after filling the text field the virtual keyboard does not go away automatically. We have to click on the back button of our smartphones to remove the virtual keyboard. So in this article, we will see how to dismiss the virtual keyboard in an app with just one tap.

For this, we will be using the onTap() property of the Flutter UI Gesture Detection.

Follow the below steps to implement the above-discussed feature: 

Step1: Use the Gesture detector onTap() property.

Step 2:  Set onTap to unfocus using the unfocus() method.


Take a look at the below example. Comments have been added to the code for reference.


import 'package:flutter/material.dart';
void main() {
// This is the main application widget.
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GFG Unfocus on Tap',
      theme: ThemeData(
      home: MyHomePage(),
// This is the homepage
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
// The GestureDetector wraps the homepage
class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return GestureDetector(
      // set onTap to unfocus
      onTap: ()=> FocusScope.of(context).unfocus(),
      child: Scaffold(
        // Appbar
        appBar: AppBar(title: Text('KeyBoard dismiss Example'),
        centerTitle: true,
        // homepage design
        body: Padding(
           padding: const EdgeInsets.all(16.0),
          // Text input
           decoration: InputDecoration(
             border: OutlineInputBorder(),
             labelText: 'Enter the text'


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!