Flutter keyboard done button causes textfield content to vanish












1














I have 2 textfields in a form. When i click on done button on keyboard in the second text field , keyboard hides and both the text fields get empty. The same happes when i closes the keyboard manually, then also the content of the textfields get lost.
It looks like the screen gets refresh evertime this happens. why is it so?



@override
Widget build(BuildContext context) {
TextEditingController nameTextFieldController = TextEditingController();
TextEditingController emailTextFieldController = TextEditingController();

FocusNode emailFocusNode = new FocusNode();

// TODO: implement build
return WillPopScope(
onWillPop: () {
moveToLastScreen();
},
child: Scaffold(
appBar: AppBar(
title: Text("Signup"),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
moveToLastScreen();
}),
),
body: Form(
key: _formKey,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 20, left: 35, right: 35),
children: <Widget>[
Center(
child: GestureDetector(
onTap: () {
imageSelectorGalary();
},
child: new Container(
width: 100.0,
height: 100.0,
child: _image == null
? new Image.asset(
'images/profilepic.png',
fit: BoxFit.fitWidth,
)
: new CircleAvatar(
backgroundImage: new FileImage(_image),
radius: 200.0,
)))),
Text(
"NAME",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
inputFormatters:[
LengthLimitingTextInputFormatter(10),
],
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(emailFocusNode);
},
keyboardType: TextInputType.text,
controller: nameTextFieldController,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter the name';
}
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)),
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20))),
),
Text(
"EMAIL ID",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
controller: emailTextFieldController,
focusNode: emailFocusNode ,
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(new FocusNode());
},
validator: (String value){
if(value.isEmpty){
return "Please enter your email-id";
}
},
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
),
Text(
"CITY AND AREA",
style: TextStyle(fontWeight: FontWeight.bold),
),
GestureDetector(
onTap: () {
CityAreasDialog cityAreasDialog =
new CityAreasDialog();
cityAreasDialog.information(context);
},
child: Container(
margin: EdgeInsets.only(top: 5, bottom: 10),
padding: EdgeInsets.only(left: 20, right: 20),
decoration: new BoxDecoration(
border: new Border.all(color: CustomColors.grey),
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
)),
child: Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Select Your City"),
Text(
"and area",
style: TextStyle(
color: Colors.grey, fontSize: 10),
)
],
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
)
],
)),
)),
Container(
margin: EdgeInsets.only(top: 20, left: 10, right: 10),
child: RaisedButton(
onPressed: () {
debugPrint("Next Click");
onSignup();
},
child: new Text(
"NEXT",
),
))
],
),
)),
));
}









share|improve this question
























  • which part of the code you create the nameTextFieldController and similar controllers?
    – diegoveloper
    Dec 27 at 14:02










  • Here is the full code of the class, please check now @diegoveloper
    – Paras Dhawan
    Dec 27 at 14:17


















1














I have 2 textfields in a form. When i click on done button on keyboard in the second text field , keyboard hides and both the text fields get empty. The same happes when i closes the keyboard manually, then also the content of the textfields get lost.
It looks like the screen gets refresh evertime this happens. why is it so?



@override
Widget build(BuildContext context) {
TextEditingController nameTextFieldController = TextEditingController();
TextEditingController emailTextFieldController = TextEditingController();

FocusNode emailFocusNode = new FocusNode();

// TODO: implement build
return WillPopScope(
onWillPop: () {
moveToLastScreen();
},
child: Scaffold(
appBar: AppBar(
title: Text("Signup"),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
moveToLastScreen();
}),
),
body: Form(
key: _formKey,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 20, left: 35, right: 35),
children: <Widget>[
Center(
child: GestureDetector(
onTap: () {
imageSelectorGalary();
},
child: new Container(
width: 100.0,
height: 100.0,
child: _image == null
? new Image.asset(
'images/profilepic.png',
fit: BoxFit.fitWidth,
)
: new CircleAvatar(
backgroundImage: new FileImage(_image),
radius: 200.0,
)))),
Text(
"NAME",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
inputFormatters:[
LengthLimitingTextInputFormatter(10),
],
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(emailFocusNode);
},
keyboardType: TextInputType.text,
controller: nameTextFieldController,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter the name';
}
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)),
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20))),
),
Text(
"EMAIL ID",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
controller: emailTextFieldController,
focusNode: emailFocusNode ,
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(new FocusNode());
},
validator: (String value){
if(value.isEmpty){
return "Please enter your email-id";
}
},
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
),
Text(
"CITY AND AREA",
style: TextStyle(fontWeight: FontWeight.bold),
),
GestureDetector(
onTap: () {
CityAreasDialog cityAreasDialog =
new CityAreasDialog();
cityAreasDialog.information(context);
},
child: Container(
margin: EdgeInsets.only(top: 5, bottom: 10),
padding: EdgeInsets.only(left: 20, right: 20),
decoration: new BoxDecoration(
border: new Border.all(color: CustomColors.grey),
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
)),
child: Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Select Your City"),
Text(
"and area",
style: TextStyle(
color: Colors.grey, fontSize: 10),
)
],
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
)
],
)),
)),
Container(
margin: EdgeInsets.only(top: 20, left: 10, right: 10),
child: RaisedButton(
onPressed: () {
debugPrint("Next Click");
onSignup();
},
child: new Text(
"NEXT",
),
))
],
),
)),
));
}









share|improve this question
























  • which part of the code you create the nameTextFieldController and similar controllers?
    – diegoveloper
    Dec 27 at 14:02










  • Here is the full code of the class, please check now @diegoveloper
    – Paras Dhawan
    Dec 27 at 14:17
















1












1








1







I have 2 textfields in a form. When i click on done button on keyboard in the second text field , keyboard hides and both the text fields get empty. The same happes when i closes the keyboard manually, then also the content of the textfields get lost.
It looks like the screen gets refresh evertime this happens. why is it so?



@override
Widget build(BuildContext context) {
TextEditingController nameTextFieldController = TextEditingController();
TextEditingController emailTextFieldController = TextEditingController();

FocusNode emailFocusNode = new FocusNode();

// TODO: implement build
return WillPopScope(
onWillPop: () {
moveToLastScreen();
},
child: Scaffold(
appBar: AppBar(
title: Text("Signup"),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
moveToLastScreen();
}),
),
body: Form(
key: _formKey,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 20, left: 35, right: 35),
children: <Widget>[
Center(
child: GestureDetector(
onTap: () {
imageSelectorGalary();
},
child: new Container(
width: 100.0,
height: 100.0,
child: _image == null
? new Image.asset(
'images/profilepic.png',
fit: BoxFit.fitWidth,
)
: new CircleAvatar(
backgroundImage: new FileImage(_image),
radius: 200.0,
)))),
Text(
"NAME",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
inputFormatters:[
LengthLimitingTextInputFormatter(10),
],
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(emailFocusNode);
},
keyboardType: TextInputType.text,
controller: nameTextFieldController,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter the name';
}
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)),
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20))),
),
Text(
"EMAIL ID",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
controller: emailTextFieldController,
focusNode: emailFocusNode ,
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(new FocusNode());
},
validator: (String value){
if(value.isEmpty){
return "Please enter your email-id";
}
},
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
),
Text(
"CITY AND AREA",
style: TextStyle(fontWeight: FontWeight.bold),
),
GestureDetector(
onTap: () {
CityAreasDialog cityAreasDialog =
new CityAreasDialog();
cityAreasDialog.information(context);
},
child: Container(
margin: EdgeInsets.only(top: 5, bottom: 10),
padding: EdgeInsets.only(left: 20, right: 20),
decoration: new BoxDecoration(
border: new Border.all(color: CustomColors.grey),
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
)),
child: Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Select Your City"),
Text(
"and area",
style: TextStyle(
color: Colors.grey, fontSize: 10),
)
],
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
)
],
)),
)),
Container(
margin: EdgeInsets.only(top: 20, left: 10, right: 10),
child: RaisedButton(
onPressed: () {
debugPrint("Next Click");
onSignup();
},
child: new Text(
"NEXT",
),
))
],
),
)),
));
}









share|improve this question















I have 2 textfields in a form. When i click on done button on keyboard in the second text field , keyboard hides and both the text fields get empty. The same happes when i closes the keyboard manually, then also the content of the textfields get lost.
It looks like the screen gets refresh evertime this happens. why is it so?



@override
Widget build(BuildContext context) {
TextEditingController nameTextFieldController = TextEditingController();
TextEditingController emailTextFieldController = TextEditingController();

FocusNode emailFocusNode = new FocusNode();

// TODO: implement build
return WillPopScope(
onWillPop: () {
moveToLastScreen();
},
child: Scaffold(
appBar: AppBar(
title: Text("Signup"),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
moveToLastScreen();
}),
),
body: Form(
key: _formKey,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 20, left: 35, right: 35),
children: <Widget>[
Center(
child: GestureDetector(
onTap: () {
imageSelectorGalary();
},
child: new Container(
width: 100.0,
height: 100.0,
child: _image == null
? new Image.asset(
'images/profilepic.png',
fit: BoxFit.fitWidth,
)
: new CircleAvatar(
backgroundImage: new FileImage(_image),
radius: 200.0,
)))),
Text(
"NAME",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
inputFormatters:[
LengthLimitingTextInputFormatter(10),
],
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(emailFocusNode);
},
keyboardType: TextInputType.text,
controller: nameTextFieldController,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter the name';
}
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)),
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20))),
),
Text(
"EMAIL ID",
style: TextStyle(fontWeight: FontWeight.bold),
),
Padding(
padding: EdgeInsets.only(top: 5, bottom: 10),
child: TextFormField(
controller: emailTextFieldController,
focusNode: emailFocusNode ,
onFieldSubmitted: (String value){
FocusScope.of(context).requestFocus(new FocusNode());
},
validator: (String value){
if(value.isEmpty){
return "Please enter your email-id";
}
},
decoration: InputDecoration(
contentPadding: EdgeInsets.only(
top: 15, bottom: 15, left: 20, right: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
),
Text(
"CITY AND AREA",
style: TextStyle(fontWeight: FontWeight.bold),
),
GestureDetector(
onTap: () {
CityAreasDialog cityAreasDialog =
new CityAreasDialog();
cityAreasDialog.information(context);
},
child: Container(
margin: EdgeInsets.only(top: 5, bottom: 10),
padding: EdgeInsets.only(left: 20, right: 20),
decoration: new BoxDecoration(
border: new Border.all(color: CustomColors.grey),
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
)),
child: Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Select Your City"),
Text(
"and area",
style: TextStyle(
color: Colors.grey, fontSize: 10),
)
],
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
)
],
)),
)),
Container(
margin: EdgeInsets.only(top: 20, left: 10, right: 10),
child: RaisedButton(
onPressed: () {
debugPrint("Next Click");
onSignup();
},
child: new Text(
"NEXT",
),
))
],
),
)),
));
}






flutter textfield






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 27 at 14:17

























asked Dec 27 at 13:43









Paras Dhawan

9711




9711












  • which part of the code you create the nameTextFieldController and similar controllers?
    – diegoveloper
    Dec 27 at 14:02










  • Here is the full code of the class, please check now @diegoveloper
    – Paras Dhawan
    Dec 27 at 14:17




















  • which part of the code you create the nameTextFieldController and similar controllers?
    – diegoveloper
    Dec 27 at 14:02










  • Here is the full code of the class, please check now @diegoveloper
    – Paras Dhawan
    Dec 27 at 14:17


















which part of the code you create the nameTextFieldController and similar controllers?
– diegoveloper
Dec 27 at 14:02




which part of the code you create the nameTextFieldController and similar controllers?
– diegoveloper
Dec 27 at 14:02












Here is the full code of the class, please check now @diegoveloper
– Paras Dhawan
Dec 27 at 14:17






Here is the full code of the class, please check now @diegoveloper
– Paras Dhawan
Dec 27 at 14:17














1 Answer
1






active

oldest

votes


















2














This issue is because you are creating new TextEditingController every time your widget is rebuilt.
So to fix this issue, move these variables nameTextFieldController ,emailTextFieldController outside your build method.



Like this:



  TextEditingController nameTextFieldController = TextEditingController();
TextEditingController emailTextFieldController = TextEditingController();

@override
Widget build(BuildContext context) {
...





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%2f53946081%2fflutter-keyboard-done-button-causes-textfield-content-to-vanish%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









    2














    This issue is because you are creating new TextEditingController every time your widget is rebuilt.
    So to fix this issue, move these variables nameTextFieldController ,emailTextFieldController outside your build method.



    Like this:



      TextEditingController nameTextFieldController = TextEditingController();
    TextEditingController emailTextFieldController = TextEditingController();

    @override
    Widget build(BuildContext context) {
    ...





    share|improve this answer


























      2














      This issue is because you are creating new TextEditingController every time your widget is rebuilt.
      So to fix this issue, move these variables nameTextFieldController ,emailTextFieldController outside your build method.



      Like this:



        TextEditingController nameTextFieldController = TextEditingController();
      TextEditingController emailTextFieldController = TextEditingController();

      @override
      Widget build(BuildContext context) {
      ...





      share|improve this answer
























        2












        2








        2






        This issue is because you are creating new TextEditingController every time your widget is rebuilt.
        So to fix this issue, move these variables nameTextFieldController ,emailTextFieldController outside your build method.



        Like this:



          TextEditingController nameTextFieldController = TextEditingController();
        TextEditingController emailTextFieldController = TextEditingController();

        @override
        Widget build(BuildContext context) {
        ...





        share|improve this answer












        This issue is because you are creating new TextEditingController every time your widget is rebuilt.
        So to fix this issue, move these variables nameTextFieldController ,emailTextFieldController outside your build method.



        Like this:



          TextEditingController nameTextFieldController = TextEditingController();
        TextEditingController emailTextFieldController = TextEditingController();

        @override
        Widget build(BuildContext context) {
        ...






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 27 at 14:24









        diegoveloper

        10.1k11428




        10.1k11428






























            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.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • 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%2f53946081%2fflutter-keyboard-done-button-causes-textfield-content-to-vanish%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

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas

            Can't read property showImagePicker of undefined in react native iOS