3 Easy Steps to Close Keyboard in Flutter with Code

TextField is a very common widget in Flutter. When you click on the TextField it opens up the on-screen keyboard. To hide/dismiss the keyboard you have to press the back button in Android and the done button (inside the onscreen keyboard) in iOS. But, the problem is some Android phones hide the virtual (on-screen) back button while interacting with the app and iOS doesn’t show the done button when the numeric keyboard is open. So in this article, we will see how to close the keyboard in Flutter.

Strategy to Close the Keyboard in Flutter

The strategy is to wrap the whole screen inside the GestureDetector and when a user touches anywhere on the screen, we’ll hide or dismiss the keyboard by having the FocusManager.instance.primaryFocus?.unfocus() method inside the onTap of GestureDetector.

Steps to close or hide the on-screen keyboard in Flutter

Step 1: Wrap your widget (probably the scaffold widget) with the GestureDetector. The GestureDetector is super helpful in detecting the various types of gestures such as onTap, onDoubleTap, onLongPress, etc. 

Code at this point should look like this:

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

Step 2: Add the onTap callback. Adding onTap callback allows us to detect the single touch events on the screen.

Here’s the updated code:

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

Step 3: Finally, add FocusManager.instance.primaryFocus?.unfocus() method to dismiss the keyboard.

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

The FocusManager.instance.primaryFocus?.unfocus() first checks whether any TextField is in Focus or not. If the TextField is in focus then it removes the focus from the TextField thereby closing the on-screen keyboard.

Here’s how the keyboard gets dismissed:

Here’s the full code:

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

In this tutorial, we learned step-by-step instructions on how to close the keyboard in Flutter. The idea is to wrap the entire screen inside the GestureDetector and remove the focus from the TextField on Tap of anywhere on the screen.

Would you like to explore other interesting Flutter tutorials? Take a look at the following articles: