मैं स्क्रीन कीबोर्ड को कैसे खारिज कर सकता हूं?

Question

मैं एक के साथ उपयोगकर्ता इनपुट एकत्र कर रहा हूं TextFormFieldऔर जब उपयोगकर्ता एक FloatingActionButtonसंकेत दबाता है कि वे किए गए हैं, मैं स्क्रीन कीबोर्ड को खारिज करना चाहता हूं।

मैं कीबोर्ड को अपने आप कैसे दूर कर सकता हूं?

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

Comments

Collin, @ पास्कल से दूसरा उत्तर अद्यतन, सही उत्तर होना चाहिए।

— जैक

Answer 1

फ़्लटर v1.7.8 + हॉटफ़िक्स 2 के रूप में, जाने का तरीका है:

FocusScope.of(context).unfocus()

उसके बारे में पीआर पर टिप्पणी :

अब जब कि # 31909 (be75fb3) उतरा है, आप का उपयोग करना चाहिए FocusScope.of(context).unfocus()के बजाय FocusScope.of(context).requestFocus(FocusNode()), के बाद से FocusNodeरों हैं ChangeNotifiers, और ठीक से निपटाया जाना चाहिए।

-> अब और उपयोग न करें ̶r̶e̶q̶u̶e̶s̶t̶F̶o̶c̶u̶s̶(̶F̶o̶c̶u̶s̶N̶o̶d̶e̶(̶)̶।

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

Comments

हॉटफ़िक्स v1.7.8 + हॉटफ़िक्स पर मेरे लिए काम किया। 4

— राजेश जूनियर।

मेरे लिए काम करते हैं, इस उत्तर को सही तरीके से देखा जाना चाहिए

— user3087360

@kine क्या आप विस्तृत कर सकते हैं? प्रति प्रलेखन, यह करने का तरीका है (देखें api.flutter.dev/flutter/widgets/FocusNode/unfocus.html )

— पास्कल

@ पास्कल हाँ मैंने दस्तावेज़ीकरण पढ़ा है और यह मेरा पसंदीदा समाधान होगा, लेकिन मेरे ऐप में यह हमेशा काम नहीं करता है (कई TextFieldएस और अन्य एडिट विजेट्स के साथ काफी जटिल रूप )। मुझे पता नहीं क्यों लेकिन कभी-कभी unfocusकोई प्रभाव नहीं पड़ता है। इसे स्वीकृत समाधान (कोई अन्य परिवर्तन नहीं) के साथ प्रतिस्थापित करने से समस्या ठीक हो जाती है। शायद यह उस स्थान से संबंधित है जहाँ unfocusसे कहा जाता है। CheckBoxListTile.onChangedउपयोगकर्ता द्वारा चेकबॉक्स विजेट और अन्य समान स्थानों से बातचीत करने पर मुझे इसे कीबोर्ड से खारिज करने के लिए उदाहरण के लिए कॉल करने की आवश्यकता है । मुझे सटीक मुद्दा स्थान याद नहीं है।

— गायो

@kine स्पष्टीकरण के लिए धन्यवाद। स्पंदन टीम के लिए एक उदाहरण प्रदान करना अद्भुत होगा ;-)

— पास्कल

Answer 2

नोट: यह उत्तर पुराना है। स्पंदन के नए संस्करणों के लिए उत्तर देखें ।

आप कीबोर्ड का ध्यान TextFormFieldहटाकर अप्रयुक्त को दे सकते हैं FocusNode:

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

Comments

आप इस कोड को कहां लागू करेंगे? TextFormField में; शायद बाद में onChanged:या अपने कस्टम बटन की कार्रवाई में?

— चार्ल्स जूनियर

@CharlesJr मैं इसे अपने बटन की कार्रवाई में करता हूं।

— डंकन जोन्स

अगर आप चाहते हैं तो आप मेरे पैकेज का उपयोग कर सकते हैं :) pub.dartlang.org/packages/keyboard_actions

— diegoveloper

यह फ्लटर v1.7.8 से पहले है - उत्तर stackoverflow.com/a/56946311/8696915 देखें जो देता हैFocusScope.of(context).unfocus()

— रिचर्ड जॉनसन

यदि आपके पास .unfocus () तक पहुँच है, तो ऐसा न करें क्योंकि इससे मेमोरी रिसाव हो जाएगा। वह नया FocusNode () कभी साफ़ नहीं होगा। .Unfocus () के बारे में टिप्पणी देखें

— माइकल पीटरसन

Answer 3

FocusScope के साथ समाधान मेरे लिए काम नहीं करता है। मुझे एक और मिला:

import 'package:flutter/services.dart';

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

इसने मेरी समस्या हल कर दी।

Comments

यह कॉलिंग मेरे लिए कीबोर्ड को छिपाती नहीं है। क्या यह एंड्रॉइड और आईओएस दोनों पर काम करना चाहिए?

— जर्दू

IOS (12.1, iPhone 5s) और Android (Pixel 3) पर मेरे लिए काम किया

— Jannie Theunissen

आप इसे कहाँ लगाते हैं? मैं सिर्फ app में कोड के पहले बिट के रूप में इसे जोड़ने की कोशिश की और यह कुछ भी नहीं किया।

— जस्टिन 30० --8

आपका क्या मतलब है - "कोड का पहला बिट"? buildउदाहरण के लिए इसे विधि में डालें ।

— एंड्री तुर्कोवस्की

क्या संख्यात्मक की-बोर्ड के लिए इसके बराबर है?

— डैनियल मैकसिमोविच

Answer 4

स्पंदन 1.17.3 (जून 2020 तक स्थिर चैनल) के लिए, उपयोग करें

FocusManager.instance.primaryFocus.unfocus();

Answer 5

उपरोक्त समाधानों में से कोई भी मेरे लिए काम नहीं करता है।

फ़्लटर यह सुझाव देता है - अपने विजेट को नए GestureDetector () के अंदर रखें, जिस पर टैप कीबोर्ड को छिपाएगा और फ़ोकसस्कोप (संदर्भ) .requestFocus (नया फ़ोकसकोड ()) का उपयोग करेगा।

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

Answer 6

निम्नलिखित कोड ने मुझे कीबोर्ड छिपाने में मदद की

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

Answer 7

सूची को स्क्रॉल करते समय ऑटो छिपा कीबोर्ड के .unfocus () का उदाहरण कार्यान्वयन

FocusScope.of(context).unfocus();

आप पा सकते हैं

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

धन्यवाद करने के लिए szotp

Comments

हाँ, यह इसे करने का सबसे सरल तरीका है।

— मिथुन नाथ

Answer 8

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

नल के इशारे पर इसे आजमाएं

Comments

धन्यवाद ... इसका हल

— अजय कुमार

Answer 9

स्पंदन में के रूप में सब कुछ एक विजेट है, मैं रैप करने के लिए फैसला किया SystemChannels.textInput.invokeMethod('TextInput.hide');और FocusScope.of(context).requestFocus(FocusNode());एक विजेट और उस में एक mixin के साथ एक लघु उपयोगिता मॉड्यूल में दृष्टिकोण।

विजेट के साथ, आप विजेट के साथ किसी भी विजेट (एक अच्छे आईडीई समर्थन का उपयोग करते समय बहुत सुविधाजनक) को लपेट सकते हैं 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(),
    );
  }
}

मिश्रण के साथ, आप किसी भी बातचीत पर कीबोर्ड को किसी भी स्थिति या विजेट से छिपा सकते हैं:

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

बस एक keyboard_hider.dartफ़ाइल बनाएं और विजेट और मिक्सी उपयोग करने के लिए तैयार हैं:

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

Answer 10

आप कक्षा unfocus()से विधि का उपयोग कर सकते हैं 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());
}

Comments

नमस्ते! यह सबसे अच्छा होगा यदि आप अपने उत्तर को अपने उत्तर में थोड़ा और संदर्भ जोड़ने के लिए संपादित कर सकें ।

— ग्रूव्लेक्स

कम से कम कोडिंग के साथ सबसे अच्छा समाधान

— वैल

हां, यह विशिष्ट विजेट पर टैप करने पर ध्यान हटाता है। इसे मेरे ऐप पर हर विजेट में जोड़ नहीं सकते।

— 1

विजेट पर टैप करने का तरीका कॉल करने का सिर्फ एक तरीका है unfocus। यदि आप इसे अपने ऐप पर स्पैम नहीं करना चाहते हैं, तो आप एक अलग तरीके का उपयोग कर सकते हैं, जैसे TextFormFieldपरिवर्तन घटना या प्रतिक्रियाशील पैटर्न, यह आपके ऐप के आर्किटेक्चर पर निर्भर करता है।

— एवेंड्रो एप।

Answer 11

अलग-अलग संस्करण के लिए अलग-अलग दृष्टिकोण की तरह दिखता है। मैं फ़्लटर v1.17.1 का उपयोग कर रहा हूं और नीचे मेरे लिए काम करता है।

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

Answer 12

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

Answer 13

पाठ संपादन नियंत्रक का उपयोग करने का प्रयास करें। शुरुआत में,

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

और प्रेस घटना में,

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

यह कीबॉर्ड को खारिज कर देगा।