How to unfocus TextField that has custom FocusNode?












0















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

}









share|improve this question























  • So testing this, I enter in a value into Phone number, press enter, enter a value into Password, press enter, the soft keyboard dismisses and the Password field is no longer focused. Is this not what you want? Gif

    – SnakeyHips
    Nov 26 '18 at 13:24













  • @SnakeyHips I want both this behavior and losing focus by clicking outside of the keyboard. Right now, clicking outside of the keyboard works only for first textfield, which has no custom focusNode.

    – desudesudesu
    Nov 26 '18 at 13:28













  • I don't seem to have any problems doing that? Gif

    – SnakeyHips
    Nov 26 '18 at 13:32













  • @SnakeyHips comment out SystemChannels.textInput.invokeMethod('TextInput.hide'); -- because it hides the keyboard but doesn't end editing textfield (cursor is still blinking there).

    – desudesudesu
    Nov 26 '18 at 13:33











  • Still working fine for me? I did have to remove this.performRegister(context); because that method wasn't provided within your code. Maybe that method is causing the issue?

    – SnakeyHips
    Nov 26 '18 at 13:35
















0















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

}









share|improve this question























  • So testing this, I enter in a value into Phone number, press enter, enter a value into Password, press enter, the soft keyboard dismisses and the Password field is no longer focused. Is this not what you want? Gif

    – SnakeyHips
    Nov 26 '18 at 13:24













  • @SnakeyHips I want both this behavior and losing focus by clicking outside of the keyboard. Right now, clicking outside of the keyboard works only for first textfield, which has no custom focusNode.

    – desudesudesu
    Nov 26 '18 at 13:28













  • I don't seem to have any problems doing that? Gif

    – SnakeyHips
    Nov 26 '18 at 13:32













  • @SnakeyHips comment out SystemChannels.textInput.invokeMethod('TextInput.hide'); -- because it hides the keyboard but doesn't end editing textfield (cursor is still blinking there).

    – desudesudesu
    Nov 26 '18 at 13:33











  • Still working fine for me? I did have to remove this.performRegister(context); because that method wasn't provided within your code. Maybe that method is causing the issue?

    – SnakeyHips
    Nov 26 '18 at 13:35














0












0








0








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

}









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

}






dart flutter






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 26 '18 at 12:36









desudesudesudesudesudesu

987714




987714













  • So testing this, I enter in a value into Phone number, press enter, enter a value into Password, press enter, the soft keyboard dismisses and the Password field is no longer focused. Is this not what you want? Gif

    – SnakeyHips
    Nov 26 '18 at 13:24













  • @SnakeyHips I want both this behavior and losing focus by clicking outside of the keyboard. Right now, clicking outside of the keyboard works only for first textfield, which has no custom focusNode.

    – desudesudesu
    Nov 26 '18 at 13:28













  • I don't seem to have any problems doing that? Gif

    – SnakeyHips
    Nov 26 '18 at 13:32













  • @SnakeyHips comment out SystemChannels.textInput.invokeMethod('TextInput.hide'); -- because it hides the keyboard but doesn't end editing textfield (cursor is still blinking there).

    – desudesudesu
    Nov 26 '18 at 13:33











  • Still working fine for me? I did have to remove this.performRegister(context); because that method wasn't provided within your code. Maybe that method is causing the issue?

    – SnakeyHips
    Nov 26 '18 at 13:35



















  • So testing this, I enter in a value into Phone number, press enter, enter a value into Password, press enter, the soft keyboard dismisses and the Password field is no longer focused. Is this not what you want? Gif

    – SnakeyHips
    Nov 26 '18 at 13:24













  • @SnakeyHips I want both this behavior and losing focus by clicking outside of the keyboard. Right now, clicking outside of the keyboard works only for first textfield, which has no custom focusNode.

    – desudesudesu
    Nov 26 '18 at 13:28













  • I don't seem to have any problems doing that? Gif

    – SnakeyHips
    Nov 26 '18 at 13:32













  • @SnakeyHips comment out SystemChannels.textInput.invokeMethod('TextInput.hide'); -- because it hides the keyboard but doesn't end editing textfield (cursor is still blinking there).

    – desudesudesu
    Nov 26 '18 at 13:33











  • Still working fine for me? I did have to remove this.performRegister(context); because that method wasn't provided within your code. Maybe that method is causing the issue?

    – SnakeyHips
    Nov 26 '18 at 13:35

















So testing this, I enter in a value into Phone number, press enter, enter a value into Password, press enter, the soft keyboard dismisses and the Password field is no longer focused. Is this not what you want? Gif

– SnakeyHips
Nov 26 '18 at 13:24







So testing this, I enter in a value into Phone number, press enter, enter a value into Password, press enter, the soft keyboard dismisses and the Password field is no longer focused. Is this not what you want? Gif

– SnakeyHips
Nov 26 '18 at 13:24















@SnakeyHips I want both this behavior and losing focus by clicking outside of the keyboard. Right now, clicking outside of the keyboard works only for first textfield, which has no custom focusNode.

– desudesudesu
Nov 26 '18 at 13:28







@SnakeyHips I want both this behavior and losing focus by clicking outside of the keyboard. Right now, clicking outside of the keyboard works only for first textfield, which has no custom focusNode.

– desudesudesu
Nov 26 '18 at 13:28















I don't seem to have any problems doing that? Gif

– SnakeyHips
Nov 26 '18 at 13:32







I don't seem to have any problems doing that? Gif

– SnakeyHips
Nov 26 '18 at 13:32















@SnakeyHips comment out SystemChannels.textInput.invokeMethod('TextInput.hide'); -- because it hides the keyboard but doesn't end editing textfield (cursor is still blinking there).

– desudesudesu
Nov 26 '18 at 13:33





@SnakeyHips comment out SystemChannels.textInput.invokeMethod('TextInput.hide'); -- because it hides the keyboard but doesn't end editing textfield (cursor is still blinking there).

– desudesudesu
Nov 26 '18 at 13:33













Still working fine for me? I did have to remove this.performRegister(context); because that method wasn't provided within your code. Maybe that method is causing the issue?

– SnakeyHips
Nov 26 '18 at 13:35





Still working fine for me? I did have to remove this.performRegister(context); because that method wasn't provided within your code. Maybe that method is causing the issue?

– SnakeyHips
Nov 26 '18 at 13:35












1 Answer
1






active

oldest

votes


















0














Comes out, I didn't manage the lifecycle of FocusNode properly: https://flutter.io/docs/cookbook/forms/focus



Thus, following code did work for me:



class RegisterScreen extends StatefulWidget {
@override
_RegisterScreenState createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
final phoneNumberTEC = TextEditingController();
final passwordTEC = TextEditingController();
FocusNode passwordFocusNode;

@override
void initState() {
super.initState();

this.passwordFocusNode = FocusNode();
}

@override
void dispose() {
this.passwordFocusNode.dispose();

super.dispose();
}

@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: () {
FocusScope.of(context).requestFocus(new FocusNode());
debugPrint("!!!");
},
child: child,
);
return gesture;
}

// ...

}


Thanks for @SnakeyHips for help - inability to reproduce the issue when it was clearly reproducible on my side gave me some thoughts :)






share|improve this answer


























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53481261%2fhow-to-unfocus-textfield-that-has-custom-focusnode%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Comes out, I didn't manage the lifecycle of FocusNode properly: https://flutter.io/docs/cookbook/forms/focus



    Thus, following code did work for me:



    class RegisterScreen extends StatefulWidget {
    @override
    _RegisterScreenState createState() => _RegisterScreenState();
    }

    class _RegisterScreenState extends State<RegisterScreen> {
    final phoneNumberTEC = TextEditingController();
    final passwordTEC = TextEditingController();
    FocusNode passwordFocusNode;

    @override
    void initState() {
    super.initState();

    this.passwordFocusNode = FocusNode();
    }

    @override
    void dispose() {
    this.passwordFocusNode.dispose();

    super.dispose();
    }

    @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: () {
    FocusScope.of(context).requestFocus(new FocusNode());
    debugPrint("!!!");
    },
    child: child,
    );
    return gesture;
    }

    // ...

    }


    Thanks for @SnakeyHips for help - inability to reproduce the issue when it was clearly reproducible on my side gave me some thoughts :)






    share|improve this answer






























      0














      Comes out, I didn't manage the lifecycle of FocusNode properly: https://flutter.io/docs/cookbook/forms/focus



      Thus, following code did work for me:



      class RegisterScreen extends StatefulWidget {
      @override
      _RegisterScreenState createState() => _RegisterScreenState();
      }

      class _RegisterScreenState extends State<RegisterScreen> {
      final phoneNumberTEC = TextEditingController();
      final passwordTEC = TextEditingController();
      FocusNode passwordFocusNode;

      @override
      void initState() {
      super.initState();

      this.passwordFocusNode = FocusNode();
      }

      @override
      void dispose() {
      this.passwordFocusNode.dispose();

      super.dispose();
      }

      @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: () {
      FocusScope.of(context).requestFocus(new FocusNode());
      debugPrint("!!!");
      },
      child: child,
      );
      return gesture;
      }

      // ...

      }


      Thanks for @SnakeyHips for help - inability to reproduce the issue when it was clearly reproducible on my side gave me some thoughts :)






      share|improve this answer




























        0












        0








        0







        Comes out, I didn't manage the lifecycle of FocusNode properly: https://flutter.io/docs/cookbook/forms/focus



        Thus, following code did work for me:



        class RegisterScreen extends StatefulWidget {
        @override
        _RegisterScreenState createState() => _RegisterScreenState();
        }

        class _RegisterScreenState extends State<RegisterScreen> {
        final phoneNumberTEC = TextEditingController();
        final passwordTEC = TextEditingController();
        FocusNode passwordFocusNode;

        @override
        void initState() {
        super.initState();

        this.passwordFocusNode = FocusNode();
        }

        @override
        void dispose() {
        this.passwordFocusNode.dispose();

        super.dispose();
        }

        @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: () {
        FocusScope.of(context).requestFocus(new FocusNode());
        debugPrint("!!!");
        },
        child: child,
        );
        return gesture;
        }

        // ...

        }


        Thanks for @SnakeyHips for help - inability to reproduce the issue when it was clearly reproducible on my side gave me some thoughts :)






        share|improve this answer















        Comes out, I didn't manage the lifecycle of FocusNode properly: https://flutter.io/docs/cookbook/forms/focus



        Thus, following code did work for me:



        class RegisterScreen extends StatefulWidget {
        @override
        _RegisterScreenState createState() => _RegisterScreenState();
        }

        class _RegisterScreenState extends State<RegisterScreen> {
        final phoneNumberTEC = TextEditingController();
        final passwordTEC = TextEditingController();
        FocusNode passwordFocusNode;

        @override
        void initState() {
        super.initState();

        this.passwordFocusNode = FocusNode();
        }

        @override
        void dispose() {
        this.passwordFocusNode.dispose();

        super.dispose();
        }

        @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: () {
        FocusScope.of(context).requestFocus(new FocusNode());
        debugPrint("!!!");
        },
        child: child,
        );
        return gesture;
        }

        // ...

        }


        Thanks for @SnakeyHips for help - inability to reproduce the issue when it was clearly reproducible on my side gave me some thoughts :)







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 26 '18 at 14:36

























        answered Nov 26 '18 at 14:11









        desudesudesudesudesudesu

        987714




        987714
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53481261%2fhow-to-unfocus-textfield-that-has-custom-focusnode%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Create new schema in PostgreSQL using DBeaver

            Deepest pit of an array with Javascript: test on Codility

            Costa Masnaga