web-dev-qa-db-fra.com

Comment puis-je ignorer le clavier à l'écran?

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());
}
dartflutter
19
Collin Jackson

Vous pouvez ignorer le clavier en supprimant le focus de TextFormField et en le donnant à un FocusNode inutilisé:

FocusScope.of(context).requestFocus(new FocusNode());
48
Collin Jackson

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.

14
Andrey Turkovsky

Prenez une GestureDetector au dernier niveau de tous les widgets et onTap() de cette gestureDetector et appelez 

FocusScope.of(context).requestFocus(new FocusNode());
5
Jaswant Singh

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());
}
1
Evandro Ap. S.

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;
}}
1
aamitarya