I am collecting user input with a TextFormField
and when the user presses a FloatingActionButton
indicating they are done, I want to dismiss the on screen keyboard.
How do I make the keyboard go away automatically?
import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget { MyHomePageState createState() => new MyHomePageState(); } class MyHomePageState extends State<MyHomePage> { TextEditingController _controller = new TextEditingController(); @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(), floatingActionButton: new FloatingActionButton( child: new Icon(Icons.send), onPressed: () { setState(() { // send message // dismiss on screen keyboard here _controller.clear(); }); }, ), body: new Container( alignment: FractionalOffset.center, padding: new EdgeInsets.all(20.0), child: new TextFormField( controller: _controller, decoration: new InputDecoration(labelText: 'Example Text'), ), ), ); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } void main() { runApp(new MyApp()); }
TextField is a very common widget in Flutter. When you click on the TextField it opens up the on-screen keyboard. To hide/dismiss the keyboard you have to press the back button in Android and the done button (inside the onscreen keyboard) in iOS.
For Flutter version 2 or latest :
Since Flutter 2
with null safety this is the best way:
FocusManager.instance.primaryFocus?.unfocus();
Note: using old ways leads to some problems like keep rebuild states;
For Flutter version < 2 :
As of Flutter v1.7.8+hotfix.2, the way to go is:
FocusScope.of(context).unfocus();
Comment on PR about that:
Now that #31909 (be75fb3) has landed, you should use
FocusScope.of(context).unfocus()
instead ofFocusScope.of(context).requestFocus(FocusNode())
, sinceFocusNode
s areChangeNotifiers
, and should be disposed properly.
-> DO NOT use ̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶
anymore.
F̶o̶c̶u̶s̶S̶c̶o̶p̶e̶.̶o̶f̶(̶c̶o̶n̶t̶e̶x̶t̶)̶.̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶)̶;̶
Read more about the FocusScope
class in the flutter docs.
Note: This answer is outdated. See the answer for newer versions of Flutter.
You can dismiss the keyboard by taking away the focus of the TextFormField
and giving it to an unused FocusNode
:
FocusScope.of(context).requestFocus(FocusNode());
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With