Wie kann ich die Bildschirmtastatur schließen?

Ich sammle Benutzereingaben mit a TextFormFieldund wenn der Benutzer eine drückt FloatingActionButton, um anzuzeigen, dass sie fertig sind, möchte ich die Bildschirmtastatur schließen.

Wie kann ich die Tastatur automatisch ausschalten lassen?

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());
}

Ab Flutter v1.7.8 + hotfix.2 ist der richtige Weg:

FocusScope.of(context).unfocus()

Kommentar zu PR dazu:

Nachdem # 31909 (be75fb3) gelandet ist, sollten Sie FocusScope.of(context).unfocus()anstelle von verwenden FocusScope.of(context).requestFocus(FocusNode()), da FocusNodes sind ChangeNotifiersund ordnungsgemäß entsorgt werden sollten.

-> NICHT verwenden ̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶mehr.

 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̶(̶)̶)̶;̶

Hinweis: Diese Antwort ist veraltet. Siehe die Antwort für neuere Versionen von Flutter .

Sie können die Tastatur schließen, indem Sie den Fokus der Tastatur entfernen TextFormFieldund sie einer nicht verwendeten Tastatur geben FocusNode:

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

Die Lösung mit FocusScope funktioniert bei mir nicht. Ich habe einen anderen gefunden:

import 'package:flutter/services.dart';

SystemChannels.textInput.invokeMethod('TextInput.hide');

Es hat mein Problem gelöst.

Verwenden Sie für Flutter 1.17.3 (stabiler Kanal ab Juni 2020)

FocusManager.instance.primaryFocus.unfocus();

Keine der oben genannten Lösungen funktioniert bei mir nicht.

Flutter schlägt dies vor - Legen Sie Ihr Widget in einen neuen GestureDetector (), auf dem durch Tippen die Tastatur ausgeblendet wird, und onTap verwenden Sie FocusScope.of (Kontext) .requestFocus (neuer 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;
}}

Der folgende Code hat mir geholfen, die Tastatur auszublenden

   void initState() {
   SystemChannels.textInput.invokeMethod('TextInput.hide');
   super.initState();
   }

Die Beispielimplementierung von .unfocus () zum automatischen Ausblenden der Tastatur beim Scrollen einer Liste

FocusScope.of(context).unfocus();

finden Sie unter

https://github.com/flutter/flutter/issues/36869#issuecomment-518118441

Danke an szotp

GestureDetector(
          onTap: () {
            FocusScope.of(context).unfocus();
          },
          child:Container(
    alignment: FractionalOffset.center,
    padding: new EdgeInsets.all(20.0),
    child: new TextFormField(
      controller: _controller,
      decoration: new InputDecoration(labelText: 'Example Text'),
    ),
  ), })

Versuchen Sie dies mit einer Tippgeste

Da in Flutter alles ein Widget ist, habe ich beschlossen, das SystemChannels.textInput.invokeMethod('TextInput.hide');und das zu verpackenFocusScope.of(context).requestFocus(FocusNode()); Ansatz in ein kurzes Dienstprogrammmodul mit einem Widget und einem Mixin zu packen.

Mit dem Widget können Sie jedes Widget (sehr praktisch bei Verwendung einer guten IDE-Unterstützung) mit dem KeyboardHiderWidget umschließen:

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(),
    );
  }
}

Mit dem Mixin können Sie auslösen, dass die Tastatur bei jeder Interaktion vor einem beliebigen Status oder Widget versteckt wird:

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, ...
      },
    );
  }
}

Erstellen Sie einfach eine keyboard_hider.dartDatei und das Widget und das Mixin können verwendet werden:

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,
    );
  }
}

Sie können eine unfocus()Methode aus der FocusNodeKlasse verwenden.

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());
}

Sieht nach unterschiedlichen Ansätzen für unterschiedliche Versionen aus. Ich verwende Flutter v1.17.1 und das Folgende funktioniert für mich.

onTap: () {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
       currentFocus.focusedChild.unfocus();
    }
}

_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>[/*...*/],
    ),
    ),
 );
}

Versuchen Sie es mit einem Textbearbeitungs-Controller. am Anfang,

    final myController = TextEditingController();
     @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

und in der On-Press-Veranstaltung,

onPressed: () {
            commentController.clear();}

Dadurch wird das Keybord geschlossen.