How do i dismiss the key board when tap on outside TextField

Last updated Oct 30, 2021

In this flutter example tutorial we will learn how to hide the keyboard when we touch the outside TextField or dismiss keyboard touch any where on the screen.

Generally when we write any text on the TextField we get keyboard up, this keyboard contains done button in android, where as in ios there is no done button will appear on keyboard, so how there we may get the issue to hide keyboard while touch outside of the Textfield.

How we will overcome this issue to hide keyboard in flutter?

To make keyboard dismiss we just need to remove the focus from all the textfield of the screen, this will be done by calling unfocus() method.

FocusManager.instance.primaryFocus!.unfocus();

Dismiss Keyboard touch outside the textfield in flutter

Let's check the example code to hide keyboard on touch outside the TextField.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Wrap MaterialApp with our DismissKeyboard widget
    return DismissKeyboard(
      child: MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Dismiss Keyboard',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dismiss Keyboard'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Center(
          child: Column(
            children: [
              TextField(
                keyboardType: TextInputType.text,
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  hintText: 'Enter your Name',
                  border: OutlineInputBorder(),

                ),
              ),
              SizedBox(height:20),
              TextField(
                keyboardType: TextInputType.number,
                textInputAction: TextInputAction.done,
                decoration: InputDecoration(
                  hintText: 'Mobile Number',
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height:20),
              TextButton(
                style: ButtonStyle(
                  minimumSize: MaterialStateProperty.all(Size(double.infinity,40)),
                  backgroundColor: MaterialStateProperty.all(Colors.green),
                  foregroundColor: MaterialStateProperty.all(Colors.white),
                ),
                  onPressed: (){
                    FocusScopeNode currentFocus = FocusScope.of(context);
                    if (!currentFocus.hasPrimaryFocus &&
                        currentFocus.focusedChild != null) {
                      FocusManager.instance.primaryFocus!.unfocus();
                    }
                  }, child: Text("Submit"))
            ],
          ),
        ),
      ),
    );
  }
}

// The DismissKeybaord widget (it's reusable)
class DismissKeyboard extends StatelessWidget {
  final Widget child;
  DismissKeyboard({required this.child});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScopeNode currentFocus = FocusScope.of(context);
        if (!currentFocus.hasPrimaryFocus &&
            currentFocus.focusedChild != null) {
          FocusManager.instance.primaryFocus!.unfocus();
        }
      },
      child: child,
    );
  }
}

Conclusion: In this Flutter example, we covered how to hide keyboard on tap outside Textfield and dismiss keyboard on tap on button.

Article Contributed By :

1083 Views

Projects By category