https://github.com/dartsidedev/keyboard_hider
This tiny Flutter package help you hide the keyboard. With convenient helper methods and the KeyboardHider widget.
https://github.com/dartsidedev/keyboard_hider
dart dart-package flutter flutter-package flutter-ui flutter-widget flutter-widgets hide-your-keyboard
Last synced: 6 months ago
JSON representation
This tiny Flutter package help you hide the keyboard. With convenient helper methods and the KeyboardHider widget.
- Host: GitHub
- URL: https://github.com/dartsidedev/keyboard_hider
- Owner: dartsidedev
- License: bsd-3-clause
- Created: 2022-01-22T14:44:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-22T21:37:35.000Z (over 3 years ago)
- Last Synced: 2024-11-05T10:14:09.823Z (7 months ago)
- Topics: dart, dart-package, flutter, flutter-package, flutter-ui, flutter-widget, flutter-widgets, hide-your-keyboard
- Language: Dart
- Homepage: https://pub.dev/packages/keyboard_hider
- Size: 1.26 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `keyboard_hider`
> This tiny Flutter package help you hide the keyboard. With convenient helper methods and the `KeyboardHider` widget.
Have you ever heard that in Flutter, everything is a widget? I have, so I decided to create a simple widget that helps you hide your users' keyboard easily on your forms.
[](https://github.com/dartsidedev/keyboard_hider/actions) [](https://codecov.io/gh/dartsidedev/keyboard_hider) [](https://pub.dev/packages/keyboard_hider 'See keyboard_hider package info on pub.dev') [](https://pub.dev/publishers/dartside.dev/packages) [](https://github.com/dartsidedev/keyboard_hider 'Star me on GitHub!')
## Important links
* [Read the source code and **star the repo** on GitHub](https://github.com/dartsidedev/keyboard_hider)
* [Open an issue on GitHub](https://github.com/dartsidedev/keyboard_hider/issues)
* [See package on **pub.dev**](https://pub.dev/packages/keyboard_hider)
* [Read the docs on **pub.dev**](https://pub.dev/documentation/keyboard_hider/latest/)
* [Stack Overflow - How can I dismiss the on screen keyboard?](https://stackoverflow.com/questions/44991968/how-can-i-dismiss-the-on-screen-keyboard)
* Flutter Docs - [`GestureDetector`](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html), [`SystemChannels`](https://api.flutter.dev/flutter/services/SystemChannels-class.html), [`SystemChannels.textInput`](https://api.flutter.dev/flutter/services/SystemChannels/textInput-constant.html), [`FocusScopeNode`](https://api.flutter.dev/flutter/widgets/FocusScopeNode-class.html), [`FocusNode.unfocus`](https://api.flutter.dev/flutter/widgets/FocusNode/unfocus.html)
If you enjoy using this package, **a thumbs up on [pub.dev](https://pub.dev/packages/keyboard_hider) would be highly appreciated!** 👍💙🚀
## Motivation
While interacting with our users, we realized that not every user knows their keyboard very well and that they expect the keyboard to be hidden when the click outside a text field.
We decided to give our users the option to hide their keyboard for forms when they clicked outside a text field.
I searched how to do that, and I found [this question](https://stackoverflow.com/questions/44991968/how-can-i-dismiss-the-on-screen-keyboard) on Stack Overflow.
I wasn't really satisfied with adding repeated code everywhere, as remembering how to configure the `GestureDetector`, and what is the correct way to `unfocus` (hide the keyboard) is a little annoying.
You can see [my answer on Stack Overflow](https://stackoverflow.com/a/55727378/4541492) from 2019: I decided to wrap this functionality in a convenient Flutter widget that simplifies hiding the keyboard whenever the user taps on the screen outside a text field (similar to how keyboard hiding works on the web).
Since then, I worked on a couple of projects, and I've seen that this pattern is discussed again and again, so now I decided to publish this package so that I (and everyone else) can quickly and simply add this functionality to our Flutter apps.
## Usage
Wrap your widget that should detect touches with a [`KeyboardHider` widget](https://pub.dev/documentation/keyboard_hider/latest/keyboard_hider/KeyboardHider-class.html) and upon touch, it should hide the keyboard if visible.
The widget doesn't interfere with text fields, so your users can seamlessly switch and jump between text fields, even if the text fields are wrapped in a `KeyboardHider` widget.
```dart
import 'package:keyboard_hider/keyboard_hider.dart';
class YourWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// When you now tap on the child, the keyboard should be dismissed.
return KeyboardHider(
child: Text('your widgets...'),
);
}
}
```
The package also includes two helper functions that simplified hiding your keyboard.
The [`unfocus(BuildContext context)`](https://pub.dev/documentation/keyboard_hider/latest/keyboard_hider/unfocus.html) function takes the context and dismisses the keyboard by un-focusing the context's `FocusScopeNode`.
The [`hideTextInput()` function](https://pub.dev/documentation/keyboard_hider/latest/keyboard_hider/hideTextInput.html) invokes the `TextInput.hide` method on the `SystemChannels.textInput` method channel.
If needed, you can also pass a [`HideMode`](https://pub.dev/documentation/keyboard_hider/latest/keyboard_hider/HideMode.html) value to the `KeyboardHider`.
By default, the `KeyboardHider` widget uses the `unfocus` approach, but you can change that to `hideTextInput`:
```dart
class YourOtherWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// When you now tap on the child, the keyboard should be hidden.
return KeyboardHider(
mode: HideMode.hideTextInput,
child: Text('your widgets...'),
);
}
}
```
With `hideTextInput`, the keyboard will be hidden, but it does not unfocus the current focus scope node.
This means that if a text field was in focus, it will stay in focus, only the keyboard will get hidden.
You can find the example app on [GitHub](https://github.com/dartsidedev/keyboard_hider/blob/main/example/lib/main.dart) and on [pub.dev](https://pub.dev/packages/keyboard_hider/example).
If you still have questions about the structure of this package, I encourage you to take another look at the [docs](https://pub.dev/documentation/keyboard_hider/latest/).