why does Flutter form reset all fields when I click submit? - forms

Question

I have a FORM withe 32 TEXTFORMFIELDS and abutton to validate and navigate to output screen.
TextButton(
onPressed: () {
_formKey.currentState.save(); // I added this line which does nothing
if (_formKey.currentState.validate()) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return OutputScreen();
},
),
);
} else {
_showAlert(context); // third partypackage alert function
}
},
child: Text(
'Calculate',
),
),
My problem is that if the user clicked submit, sometimes it resets all fields whether the validation was true or false;
Here is a thing I found after a lot of testing, when the user inputs a text field, the input keyboard has a "DONE" key, which the user can use to end editing. Now if the user didn't use it and jus tapped on the next field for input and continues to click the subit button I created, it resets all form.
Any ideas?
or is there a way to force user to click 'DONE' on the keyboard once finished input.
Thanks in advance.
///////////////////////////////////////////////////
EDIT: Full code sample
///////////////////////////////////////////////////
class CementInputPage extends StatefulWidget {
#override
_CementInputPageState createState() => _CementInputPageState();
}
class _CementInputPageState extends State<CementInputPage> {
static const double sizedBoxHeight = 8;
final _formKeyCement = GlobalKey<FormState>();
CementData cementData = new CementData();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFDDDDDD),
appBar: AppBar(
title: Text("Cement Input Data"),
),
body: SafeArea(
child: Form(
key: _formKeyCement,
child: ListView(
children: [
// Header data
WhiteBoxContainer( //container I created in another file
boxTitle: 'Header',
childWidget: Column(
children: [
//TODO: Validate date format
myStringTextInputRow('Date'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Operator Company'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Cement Contractor'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Well Name'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Field Name'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Rig'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Rig Supervisor'),
SizedBox(height: sizedBoxHeight),
myStringTextInputRow('Cement Supervisor'),
SizedBox(height: sizedBoxHeight),
],
),
),
//
//Well data
WhiteBoxContainer(
boxTitle: 'Well Data',
childWidget: Column(
children: [
Row(
children: [
Expanded(
child: TextFormField(
keyboardType:
TextInputType.numberWithOptions(decimal: true),
autovalidateMode:
AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Section Depth (ft)",
),
validator: (value) {
return sectionTDValidator(value);
},
),
),
checkInputStatus(InputValidationStatus.notValid),
],
),
SizedBox(height: sizedBoxHeight),
Row(
children: [
Expanded(
child: TextFormField(
keyboardType:
TextInputType.numberWithOptions(decimal: true),
autovalidateMode:
AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Casing length (ft)",
),
validator: (value) {
return casingLengthValidator(value);
},
),
),
checkInputStatus(InputValidationStatus.notValid),
],
),
Container(
child: TextButton(
onPressed: () {
_formKeyCement.currentState.save(); // line I added which did nothing
if (_formKeyCement.currentState.validate()) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return CementOutputScreen();
},
),
);
} else {
//I want to show an alert dialog
child: Text(
'Calculate',
),
),
),
],
),
),
),
);
}
String sectionTDValidator(String value) {
if (value.isNotEmpty) {
cementData.sectionTD = double.parse(value);
if (cementData.sectionTD < kMinWellDepth) {
return 'Section Depth is too short!';
} else if (cementData.sectionTD > kMaxWellDepth) {
return 'Section depth is too long!';
} else if (cementData.casingLength != null &&
cementData.casingLength > cementData.sectionTD) {
return 'Section depth is shorter than casing length!';
}
} else {
cementData.sectionTD = null;
}
return null;
}
String casingLengthValidator(String value) {
if (value.isNotEmpty) {
cementData.casingLength = double.parse(value);
if (cementData.casingLength < kMinWellDepth) {
return 'Casing Length is too short!';
} else if (cementData.casingLength > kMaxWellDepth) {
return 'Casing Length is too long!';
} else if (cementData.sectionTD != null &&
cementData.casingLength > cementData.sectionTD) {
return 'Casing Length is longer than section depth!';
} else if (cementData.leadLength != null) {
if (cementData.leadLength > cementData.casingLength) {
return 'Casing length is shorter than lead length!';
} else if (cementData.tailLength != null) {
// check tail length
if (cementData.tailLength > cementData.casingLength) {
return 'Casing length is shorter than lead length!';
} else if ((cementData.leadLength + cementData.tailLength) >
cementData.casingLength) {
return 'Casing length is shorter than total cement length!';
}
}
} else if (cementData.shoeTrackLength != null &&
cementData.shoeTrackLength >= cementData.casingLength) {
return 'Shoe track length is >= casing length!';
}
} else {
cementData.casingLength = null;
}
return null;
}
String shoeTrackLengthValidator(String value) {
if (value.isNotEmpty) {
cementData.shoeTrackLength = double.parse(value);
if (cementData.casingLength != null &&
cementData.shoeTrackLength >= cementData.casingLength) {
return 'Shoe track length is >= casing length!';
}
} else {
cementData.shoeTrackLength = null;
}
return null;
}
String stickUpLengthValidator(String value) {
if (value.isNotEmpty) {
cementData.stickUpLength = double.parse(value);
if (cementData.stickUpLength > kMaxStickUpLength) {
return 'Stick up length is too long!';
}
} else {
cementData.stickUpLength = null;
}
return null;
}
}
Row myStringTextInputRow(String labelText) {
return Row(
children: [
Expanded(
child: TextFormField(
keyboardType: TextInputType.name,
maxLines: 2,
minLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: labelText,
),
),
),
checkInputStatus(InputValidationStatus.notCritical),
],
);
}
Container checkInputStatus(InputValidationStatus inputStatus) {
if (inputStatus == InputValidationStatus.notValid) {
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 3),
child: Icon(
Icons.clear,
color: Colors.red[900],
size: 18.0,
semanticLabel: 'Feedback icon',
),
);
} else if (inputStatus == InputValidationStatus.valid) {
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 3),
child: Icon(
Icons.done,
color: Colors.green[900],
size: 18.0,
semanticLabel: 'Feedback icon',
),
);
} else {
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 3),
child: Icon(
Icons.flaky,
color: Colors.orange[700],
size: 18.0,
semanticLabel: 'Feedback icon',
),
);
}
;
}

Answer 1

Try adding TextEditingController to yours TextFormFields and removing the autovalidateMode.

Answer 2

This might be because you are using ListView to render your children. ListView only renders the visible children (has recycling nature). Instead, use Column with SingleChildScrollView.
SingleChildScrollView(child:Column(children:yourFormChildren));
Also check: flutter form data disappears when I scroll