One of the most common issues flutters users face while developing mobile apps is the keyboard. After the Keyboard pops up, it is important to dismiss it because it takes up around half the area on the screen.
Related: Login/Register in Flutter Using Firebase
In this tutorial, we will look at how to hide the keyboard on iPhone and Android devices, particularly in a Flutter app, after clicking a button.
Table of Contents
How to Hide Keyboard on iPhone
There are several ways to hide the keyboard on an iPhone. Here are two methods that you can use in your Flutter app:
Tapping outside the keyboard
The simplest way to hide the keyboard on an iPhone is by tapping outside the keyboard area. This action will dismiss the keyboard, giving more space to the app’s content. You can add this functionality to your Flutter app by adding a GestureDetector widget that listens for taps outside the keyboard area and then dismisses the keyboard.
Here’s the code:
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: YourWidgetHere(),
)
This code creates a GestureDetector that listens for taps outside the keyboard area. When the user taps outside the keyboard, the onTap method is called, which calls the unfocus() method on the FocusScope widget. This method hides the keyboard and gives more space to the app’s content.
Related: Create Internet Connection Checker Using Bloc
Using a toolbar button
Another way to hide the keyboard on an iPhone is by using a toolbar button. This button can be placed on the toolbar or the navigation bar of the app and can be used to hide the keyboard with a single tap. To add this functionality to your Flutter app, you can use the TextInputAction.done action with a TextField widget.
Here’s the code:
TextField(
decoration: InputDecoration(
hintText: 'Enter text here',
),
textInputAction: TextInputAction.done,
)
This code creates a TextField widget with the TextInputAction.done action. When the user taps the “Done” button on the keyboard, the keyboard is automatically hidden.
Related: Earn Money by using these Affiliate Program without Website
How to Hide Keyboard on Android
Using a toolbar button
Like the iPhone, you can add a toolbar button to hide the keyboard on an Android device. To do this, you can use the TextFormField widget with the textInputAction property set to TextInputAction.done.
Here’s the code:
TextFormField(
decoration: InputDecoration(
hintText: 'Enter text here',
),
textInputAction: TextInputAction.done,
)
This code creates a TextFormField widget with the textInputAction property set to TextInputAction.done. When the user taps the “Done” button on the keyboard, the keyboard is automatically hidden.
Related: Fetch Data from the Internet Using API in Flutter
Tapping outside the keyboard
Like in IOS, You can use a GestureDetector widget to listen for taps outside the keyboard area, then hide the keyboard using the unfocus() method.
Here’s the code:
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: YourWidgetHere(),
)
Additionally, if you want to collapse the keyboard on iOS without tapping on any button, you can use the scrollViewWillBeginDragging method of the UIScrollViewDelegate to detect when the user starts scrolling and dismisses the keyboard. Here’s the code:
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
final _scrollController = ScrollController();
bool _isKeyboardVisible = false;
@override
void initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.userScrollDirection == ScrollDirection.reverse && _isKeyboardVisible) {
setState(() {
_isKeyboardVisible = false;
});
FocusScope.of(context).unfocus();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
controller: _scrollController,
child: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: 'Enter text here',
),
onTap: () {
setState(() {
_isKeyboardVisible = true;
});
},
),
YourOtherWidgetsHere(),
],
),
),
);
}
}
This code creates a ScrollController and attaches it to the SingleChildScrollView widget. When the user starts scrolling, the _scrollController listens for the reverse scroll direction and hides the keyboard using the unfocus() method.
To summarize, hiding the keyboard on iPhone and Android is a crucial feature for mobile apps. By using the techniques we’ve explored in this tutorial, we can ensure that our Flutter apps provide a smooth and user-friendly experience for our users.
Here are the sources that I used for this tutorial:
- Flutter documentation: Text Field, Gesture Detector, and Scroll View.
- Medium article: How to dismiss the keyboard on tap outside in Flutter.
- Stack Overflow question: How to dismiss the keyboard when touching outside of UITextField.