How to unfocus text field in flutter?

Question

I don't know if this is normal flutter behavior, but it is annoying that you lose focus only when you tap on the keyboard "ok" button to lose focus. If this is not done, the cursor will remain active within the text field.

What is the best practice to avoid this? (In the gif it is not well appreciated, but the only way to lose focus is by tapping on the "ok" button on the keyboard, otherwise the cursor will always be active regardless of whether you tap on other areas of the screen)

    Widget _searchBar() {
     return Container(
      child: TextField(
        textAlignVertical: TextAlignVertical.center,
        style: TextStyle(
          textBaseline: TextBaseline.alphabetic,
          color: _styles["gris_oscuro1"]["color"],
        ),
        onChanged: (value) {},
        decoration: InputDecoration(
          filled: true,
          fillColor: _styles["gris_claro"]["color"],
          alignLabelWithHint: true,
          hintText: "Buscar por código",
          hintStyle: TextStyle(color: _styles["gris_oscuro2"]["color"]),
          prefixIcon:
              Icon(Icons.search, color: _styles["gris_oscuro2"]["color"]),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(40)),
            borderSide:
                BorderSide(color: _styles["gris_claro"]["color"], width: 1.0),
          ),
        ),
      ),
    );
    );


    Scaffold(
        key: _scaffoldKey,
        backgroundColor: _styles["fondo"]["bg"],
        drawer: MenuWidget(),
        body: SafeArea(
        child: _searchBar(),
        )

@ChristopherMoore I'm new to flutter, could you give me an example please — yavg, May 29 '20 at 20:05
Does this answer your question? [How to hide soft input keyboard on flutter after clicking outside TextField/anywhere on screen?](https://stackoverflow.com/questions/51652897/how-to-hide-soft-input-keyboard-on-flutter-after-clicking-outside-textfield-anyw) — Christopher Moore, May 29 '20 at 20:06
I had seen that answer, but I didn't think it was the best practice. It is? or is there a better way to do it? `body: new GestureDetector( onTap: () { FocusScope.of(context).requestFocus(new FocusNode()); },` — yavg, May 29 '20 at 20:08
It's the only practice as far as I know. There could be other methods, but not that i've seen. — Christopher Moore, May 29 '20 at 20:13

Yudhishthir Singh · Accepted Answer · 2020-05-30T15:06:55.000

14

Wrap your full page in GestureDetector and modify it's onTap function as follows:

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () { //here
        FocusScope.of(context).unfocus();
        new TextEditingController().clear();
      },
      child: Container(
      ...
    );
  }

edited May 30 '20 at 15:06

answered May 29 '20 at 20:12

Yudhishthir Singh

2,941
2
23
42

2

Please note... DO NOT create new `TextEditingController` objects as they need to be disposed of with the `dispose()` method available on the object. – Nabeel Parkar Nov 17 '20 at 05:34

score 5 · Answer 2 · answered May 16 '23 at 15:25

5

onTapOutside: ((event) {
              FocusScope.of(context).unfocus();
            }),

Add this to TextField.

answered May 16 '23 at 15:25

Oluseye

51
1
2

score 1 · Answer 3 · answered May 27 '23 at 13:00

1

Try this line of code to unfocus

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

answered May 27 '23 at 13:00

Chirag Kalathiya

316
3
8

score 0 · Answer 4 · answered Sep 01 '23 at 20:40

There was a breaking change to solutions that use FocusScope.of(context).unfocus(); as it "...was relying on the behavior that unfocusing a scope node which had focus would transfer focus to the root focus node..."

Here is a new suggested function to use for your gesture detector that wraps your scaffold.

/// removes focus from all fields.
void loseFocus() {
  FocusManager.instance.primaryFocus?.unfocus();
}

How to unfocus text field in flutter?

4 Answers4