flutter - How to unfocus TextField that has custom FocusNode?

Question

I know that general answer to unfocusing is to use this piece of code: FocusScope.of(context).requestFocus(new FocusNode());

But when TextField has custom focusNode, this code doesn't seem to work.

SystemChannels.textInput.invokeMethod('TextInput.hide'); still works, but it only removes the keyboard - field itself is still selected.

The code (irrelevant parts removed):

class RegisterScreen extends StatelessWidget {
  final phoneNumberTEC = TextEditingController();
  final passwordTEC = TextEditingController();
  final passwordFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return this.keyboardDismisser(
      context: context,
      child: Scaffold(
        appBar: new AppBar(
          title: new Text("Register"),
        ),
        body: this.page(context),
        resizeToAvoidBottomPadding: false,
      ),
    );
  }

  Widget keyboardDismisser({BuildContext context, Widget child}) {
    final gesture = GestureDetector(
      onTap: () {
        this.passwordFocusNode.unfocus();
        FocusScope.of(context).requestFocus(new FocusNode());
        SystemChannels.textInput.invokeMethod('TextInput.hide');
      },
      child: child,
    );
    return gesture;
  }

  Widget page(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            padding: new EdgeInsets.all(16.0),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  this.phoneNumberTextField(context),
                  this.passwordTextField(context),
                ]
            ),
          ),
          // cutting irrelevant widgets out
          )
        ]
    );
  }

  Widget phoneNumberTextField(BuildContext context) {
    return TextField(
      controller: this.phoneNumberTEC,
      decoration: InputDecoration(hintText: "Phone number"),
      onSubmitted: (string) {
        FocusScope.of(context).requestFocus(this.passwordFocusNode);
      },
    );
  }

  Widget passwordTextField(BuildContext context) {
    return TextField(
      controller: this.passwordTEC,
      decoration: InputDecoration(hintText: "Password"),
      obscureText: true,
      focusNode: this.passwordFocusNode,
      onSubmitted: (string) {
        this.performRegister(context);
      },
    );
  }

}

question from:https://stackoverflow.com/questions/53481261/how-to-unfocus-textfield-that-has-custom-focusnode

Answer 1

Here is a similar answer to @kasiara's answer but another way.

FocusScope.of(context).unfocus();
_textEditingController.clear();