Flutter: Unable to get textfield value on first submission - flutter

Question

I have form inside page, which contains four different fields and one button.
I have a strange issue, here's what I'm doing:
fill up form
hit Add button //variables are null
if I hit Add button again, I've correct values
I thought, maybe some library or code is causing issue so I reduced code to narrow down, now I've very simple code, only one field with material.dart import package. But the problem still exists. :(
What I've Noticed: Hitting Add button always return data from previous state than current.
Example:
Fill up form with value 1000
Hit Add button //prints null
Update value to 2000
Hit Add button //prints 1000
Update value to 3000
Hit Add button //prints 2000
and so on....
Here is complete code:
import 'package:flutter/material.dart';
class AddFees extends StatefulWidget {
#override
State<StatefulWidget> createState() => new _AddFees();
}
class _AddFees extends State<AddFees> {
final addFeesFormKey = new GlobalKey<FormState>();
final addFeesScaffoldKey = new GlobalKey<ScaffoldState>();
String _fees;
TextFormField fees;
RaisedButton addFee;
#override
void initState() {
super.initState();
}
void _submit() {
final form = addFeesFormKey.currentState;
if (form.validate()) {
setState(() {
print(_fees);
form.save();
});
}
}
#override
Widget build(BuildContext context) {
fees = TextFormField(
keyboardType: TextInputType.number,
onSaved: (val) => _fees = val,
decoration: InputDecoration(labelText: 'Fees'),
validator: (value) {
if (value.isEmpty) {
return 'Fee cannot be empty';
} else {
return null;
}
},
);
addFee = RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
onPressed: () {
_submit();
},
padding: EdgeInsets.all(12),
color: Colors.redAccent,
child: Text('Add Payment',
style: TextStyle(color: Colors.white, fontSize: 24.0)),
);
return Scaffold(
key: addFeesScaffoldKey,
body: new Form(
key: addFeesFormKey,
child: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.only(left: 24.0, right: 24.0),
children: <Widget>[
SizedBox(
height: 25.0,
),
fees,
SizedBox(
height: 15.0,
),
addFee
])),
),
);
}
}
What is going on with this?

Answer 1

You need to put the _fees = val inside a setState - see example:
fees = TextFormField(
keyboardType: TextInputType.number,
onSaved: (val) => setState(() => _fees = val), // This is change
decoration: InputDecoration(labelText: 'Fees'),
validator: (value) {
if (value.isEmpty) {
return 'Fee cannot be empty';
} else {
return null;
}
},
);

Answer 2

Finally, I figured that out and the solution was pretty simple.
Solution: Calling form.save(); before trying to access variables solve the issue.
I've swapped two lines in void _submit() method to make it work, here is the updated code:
void _submit() {
final form = addFeesFormKey.currentState;
if (form.validate()) {
setState(() {
form.save(); //swapped
print(_fees);
});
}
}