Je collecte les entrées utilisateur avec un TextFormField
et lorsque l'utilisateur appuie sur un FloatingActionButton
indiquant qu'il a terminé, je souhaite ignorer le clavier à l'écran.
Comment faire en sorte que le clavier disparaisse automatiquement?
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());
}
Vous pouvez ignorer le clavier en supprimant le focus de TextFormField
et en le donnant à un FocusNode
inutilisé:
FocusScope.of(context).requestFocus(new FocusNode());
La solution avec FocusScope ne fonctionne pas pour moi ... j'ai trouvé un autre:
import 'package:flutter/services.Dart';
SystemChannels.textInput.invokeMethod('TextInput.hide');
Cela a résolu mon problème.
Prenez une GestureDetector
au dernier niveau de tous les widgets et onTap()
de cette gestureDetector
et appelez
FocusScope.of(context).requestFocus(new FocusNode());
Vous pouvez utiliser la méthode unfocus()
à partir de la classe 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());
}
Aucune des solutions ci-dessus ne fonctionne pour moi.
Flutter suggère ceci - Placez votre widget dans new GestureDetector () sur lequel tap masquera le clavier et onTap utilisera 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;
}}