358 votes

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

Je collecte les entrées utilisateur avec TextFormField et lorsque l'utilisateur appuie sur 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());
}
 

608voto

Pascal Points 2023

Comme de Flottement v1.7.8+correctif.2, la voie à suivre est:

FocusScope.of(context).unfocus()

Commentaire sur la PR à ce sujet:

Maintenant que #31909 (be75fb3) a atterri, vous devez utiliser FocusScope.de(contexte).unfocus() au lieu de FocusScope.de(contexte).requestFocus(FocusNode()), depuis FocusNodes sont ChangeNotifiers, et doivent être éliminés correctement.

122voto

Andrey Turkovsky Points 5150

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.

19voto

aamitarya Points 124

Aucune des solutions ci-dessus ne fonctionne pour moi.

Flutter suggère ceci - Placez votre widget dans la nouvelle GestureDetector () sur laquelle tap masquera le clavier et onTap utilisera FocusScope.of (context) .requestFocus (nouvelle 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;
}}
 

7voto

Jaswant Singh Points 1745

Prenez un GestureDetector sur le niveau supérieur de tous les widgets et onTap() de ce gestureDetector et appelez

 FocusScope.of(context).requestFocus(new FocusNode());
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X