Package offering 2 specific solutions to close/unfocus keyboard when it is on focus of TextField by:

• Touch outside of anywhere but TextField (KeyboardUnfocusArea())
• Display close button over keyboard (CloseKeyboardOverlay())

Getting Started

This is a package I developed after searching a solution for this specific issue, wandering around various flutter packages, solutions and I use it on all of my production projects without an exception. So, I decided to make it available among all flutter developers.

Use, modify, clone, make pull requests..

Usage

Keyboard close button overlay

Create an instance of CloseKeyboardOverlay() class on your state class.

 final _closeKeyboardOverlay = CloseKeyboardOverlay();

Instantiate listener on initState() of your state class and do not forget to remove/dispose listener on dispose() method.

  @override
  void initState() {
    super.initState();
    _closeKeyboardOverlay.listenKeyboardVisibility(
      context,
      // OPTIONAL
      closeButtonLabel: 'CLOSE',
      closeButtonLabelStyle: TextStyle(fontSize: 15.0),
    );
  }

  @override
  void dispose() {
    _closeKeyboardOverlay.removeKeyboardVisibilityListener();
    super.dispose();
  }

The rest will be handled 😎

Keyboard unfocus area

The widget and its descendant widgets that you wrap with KeyboardUnfocusArea() will have a functionality that when anywhere but TextField() is touched the keyboard will be closed/unfocused.

  @override
  Widget build(BuildContext context) {
    return KeyboardUnfocusArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  hintText: 'Ordinary TextField',
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 20.0),
              Text(
                'Keyboard will be closed when tapped anywhere outside the TextField.',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16.0),
              ),
            ],
          ),
        ),
      ),
    );
  }