Flutter keyboard done button causes textfield content to vanish - flutter

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

Answer 1

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) {
...