Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I dismiss the on screen keyboard?

Tags:

flutter

dart

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()); } 
like image 344
Collin Jackson Avatar asked Jul 09 '17 00:07

Collin Jackson


People also ask

How do you dismiss the keyboard in Flutter the right way?

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.


2 Answers

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 of FocusScope.of(context).requestFocus(FocusNode()), since FocusNodes are ChangeNotifiers, 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.

like image 179
Pascal Avatar answered Sep 21 '22 14:09

Pascal


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()); 
like image 32
Collin Jackson Avatar answered Sep 22 '22 14:09

Collin Jackson