Flutter: Ability to remove keyboard focus from the entire tree

Created on 1 Feb 2018  ·  1Comment  ·  Source: flutter/flutter

Steps to Reproduce

I would like to show the hintText of a textField until the user touches somewhere else.
The touchpoint could be deep in the widget tree and I dont know how to obtain the current focused node somewhere in the widget tree to call unfocused, to show the textField inactive and hide the keyboard. This might be just an issue with my understanding of flutter or the documentation which lacks example and does not explain how to use the patterns.

The code example shows the GestureDetector which is calling unfocus on the node. This is simple here because the focusNode is easily accessible in the same widget. The question here is how to do the same in a nested widget tree. What is the recommended pattern to do so?

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Stack(children: <Widget>[
          new GestureDetector(
              excludeFromSemantics: true,
              onTapDown: (_) {
                _focusNode.unfocus();
              }),
          new Column(children: <Widget>[
            new TextField(
                focusNode: _focusNode,
                decoration: new InputDecoration(
                    border: null,
                    hintText: _focusNode.hasFocus ? 'FOCUS' : 'no focus')),
            new RaisedButton(
                child: new Text('Remove Focus'),
                onPressed: () => _focusNode.unfocus())
          ])
        ]));
  }

  final FocusNode _focusNode = new FocusNode();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() {});
      print('Has focus: $_focusNode.hasFocus');
    });
  }

Flutter Doctor

[√] Flutter (on Microsoft Windows [Version 10.0.16299.192], locale en-US, channel dev)
    • Flutter version 0.0.21 at c:\sdks\flutter
    • Framework revision 2e449f06f0 (2 days ago), 2018-01-29 14:26:51 -0800
    • Engine revision 6921873c71
    • Tools Dart version 2.0.0-dev.16.0
    • Engine Dart version 2.0.0-edge.da1f52592ef73fe3afa485385cb995b9aec0181a

[√] Android toolchain - develop for Android devices (Android SDK 27.0.2)
    • Android SDK at C:\Users\ride4\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[√] Android Studio (version 3.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[√] IntelliJ IDEA Community Edition (version 2017.2)
    • Flutter plugin version 19.1
    • Dart plugin version 172.4343.25

[√] Connected devices
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 7.1.1 (API 25) (emulator)
look material design framework new feature

Most helpful comment

I think this boils down to

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

Closing as duplicate of #7247
perhaps also #20227

>All comments

I think this boils down to

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

Closing as duplicate of #7247
perhaps also #20227

Was this page helpful?
0 / 5 - 0 ratings