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),
),
],
),
),
),
);
}