When we focus on the Textfield in flutter keyboard will come and we can write something, but when we tap outside of the Textfield or TextFormfield widget keyboard will not dismiss. Then how we will dismiss the keyboard when we tap on outside textformfield widgets. Let see how we can hide keyboard on tap on outside by below steps
Let's get started
Step 1: Create Flutter Application
Step 2: Create a widget which contains a Textfield widget.
Step 3: Now we need to find the Tap event of entire window except the current focus TextField widget.
To hanlde tap events we will use GestureDetector widget which we can hanlde tap,drag,hold events.
GestureDetector(
onTap: () {
}
|
Fine we have GestureDetector widget, to handle event for the entire window where we need to put this widget, yes we need to put this widget as parent widget in the widget tree.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: GestureDetector(
onTap: () {
})
);
|
Step 4: Dismiss keyboard
To dismiss keyboard we have to remove the focus of the current TextField. To do this we will use below code
FocusScope.of(context).requestFocus(new FocusNode());
|
Complete Example code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final _messangerKey = GlobalKey<ScaffoldMessengerState>();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: GestureDetector(
onTap: () {
_messangerKey.currentState.showSnackBar(
SnackBar(
duration: Duration(milliseconds: 500),
content: const Text('A SnackBar has been shown.'),
),
);
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Scaffold(
body: Container(
child: Center(
child: TextField(
decoration: InputDecoration(
hintText: ("Enter Name")
),
),
),
),
),
),
);
}
}
|
Tags: Keyboard, hide Keyboard, Dismiss Keyboard, Close Keyboard
|
Article Contributed By :
|
|
|
|
|
1080 Views |
|