How can I remove the onscreen keyboard?
I am collecting user input from TextFormField
, and when the user presses a button FloatingActionButton
indicating that they are done, I want to remove the onscreen keyboard.
How to automatically disable the keyboard?
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());
}
source to share
As of Flutter v1.7.8 + hotfix.2, there is a path:
FocusScope.of(context).unfocus()
Comment on PR about this:
Now that # 31909 (be75fb3) has landed, you should use FocusScope.of (context) .unfocus () instead of FocusScope.of (context) .requestFocus (FocusNode ()) as the FocusNode nodes are ChangeNotifiers and should be positioned correctly ...
source to share
None of the above solutions work for me.
Flutter suggests the following - put your widget in a new GestureDetector (), on which clicking will hide the keyboard, and on pressing a key, use FocusScope.of (context) .requestFocus (new FocusNode ())
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
var widget = new MaterialApp(
home: new Scaffold(
body: new Container(
height:500.0,
child: new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: new Container(
color: Colors.white,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new TextField( ),
new Text("Test"),
],
)
)
)
)
),
);
return widget;
}}
source to share
You can use unfocus()
from class FocusNode
.
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
MyHomePageState createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
TextEditingController _controller = new TextEditingController();
FocusNode _focusNode = new FocusNode(); //1 - declare and initialize variable
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.send),
onPressed: () {
_focusNode.unfocus(); //3 - call this method here
},
),
body: new Container(
alignment: FractionalOffset.center,
padding: new EdgeInsets.all(20.0),
child: new TextFormField(
controller: _controller,
focusNode: _focusNode, //2 - assign it to your TextFormField
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());
}
source to share
As in all Flutter is a widget, I decided to wrap SystemChannels.textInput.invokeMethod('TextInput.hide');
and FocusScope.of(context).requestFocus(FocusNode());
approach in a short service module widget and hagfish in it.
With a widget, you can wrap any widget (very handy when using good IDE support) with a widget KeyboardHider
:
class SimpleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return KeyboardHider(
/* Here comes a widget tree that eventually opens the keyboard,
* but the widget that opened the keyboard doesn't necessarily
* takes care of hiding it, so we wrap everything in a
* KeyboardHider widget */
child: Container(),
);
}
}
With the mixin, you can enable hiding the keyboard from any state or widget on any interaction:
class SimpleWidget extends StatefulWidget {
@override
_SimpleWidgetState createState() => _SimpleWidgetState();
}
class _SimpleWidgetState extends State<SimpleWidget> with KeyboardHiderMixin {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
// Hide the keyboard:
hideKeyboard();
// Do other stuff, for example:
// Update the state, make an HTTP request, ...
},
);
}
}
Just create a file keyboard_hider.dart
and a widget and the mixin is ready to use:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
/// Mixin that enables hiding the keyboard easily upon any interaction or logic
/// from any class.
abstract class KeyboardHiderMixin {
void hideKeyboard({
BuildContext context,
bool hideTextInput = true,
bool requestFocusNode = true,
}) {
if (hideTextInput) {
SystemChannels.textInput.invokeMethod('TextInput.hide');
}
if (context != null && requestFocusNode) {
FocusScope.of(context).requestFocus(FocusNode());
}
}
}
/// A widget that can be used to hide the text input that are opened by text
/// fields automatically on tap.
///
/// Delegates to [KeyboardHiderMixin] for hiding the keyboard on tap.
class KeyboardHider extends StatelessWidget with KeyboardHiderMixin {
final Widget child;
/// Decide whether to use
/// 'SystemChannels.textInput.invokeMethod('TextInput.hide');'
/// to hide the keyboard
final bool hideTextInput;
final bool requestFocusNode;
/// One of hideTextInput or requestFocusNode must be true, otherwise using the
/// widget is pointless as it will not even try to hide the keyboard.
const KeyboardHider({
Key key,
@required this.child,
this.hideTextInput = true,
this.requestFocusNode = true,
}) : assert(child != null),
assert(hideTextInput || requestFocusNode),
super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
hideKeyboard(
context: context,
hideTextInput: hideTextInput,
requestFocusNode: requestFocusNode,
);
},
child: child,
);
}
}
source to share
_dismissKeyboard(BuildContext context) {
FocusScope.of(context).requestFocus(new FocusNode());
}
@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () {
this._dismissKeyboard(context);
},
child: new Container(
color: Colors.white,
child: new Column(
children: <Widget>[/*...*/],
),
),
);
}
source to share