How to add/sum TextFormField values in Flutter? - flutter

Question

How can I add the values of several formfields in Flutter to dynamically calculate a total field? Imagine E.g. If the three textformfields had values of 1, 2, 3 then the total field should display 6.
I am able to convert the values to double using double.parse(value).
Code:
class _GivingPageState extends State<GivingPage> {
final _formKey = GlobalKey<FormState>();
double collection1;
double collection2;
double collection3;
double total;
#override
void initState() {
collection1 = 0;
collection2 = 0;
collection3 = 0;
total = 0;
super.initState();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Column(
children: <Widget>[
Expanded(
child: buildContent(),
),
],
),
),
),
);
}
Widget buildContent() {
return Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: lightCard(
child: Container(
padding: EdgeInsets.only(left: 0.0, right: 10, top: 10, bottom: 10),
child: Padding(
padding: const EdgeInsets.only(left: 18.0, bottom: 10),
child: Container(
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 0.0, bottom: 10),
child: Text(
'Collection Baskets',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
),
Text('Which collection baskets(s) are you giving to?'),
SizedBox(height: 15),
_buildBasket(
collectionName: 'Amount 1',
collection: collection1,
),
SizedBox(height: 10),
_buildBasket(
collectionName: 'Amount 2',
collection: collection2,
),
SizedBox(height: 10),
_buildBasket(
collectionName: 'Amount 3',
collection: collection3,
),
SizedBox(height: 10),
_buildTotal()
],
),
),
),
),
)),
));
}
void _updateTotal() {
setState(() {
total = collection1 + collection2 + collection3;
});
}
Row _buildBasket(
{#required String collectionName, #required double collection}) {
return Row(
children: <Widget>[
Expanded(
flex: 1,
child: Text(
collectionName,
style: TextStyle(fontSize: 16),
),
),
SizedBox(width: 10),
Expanded(
flex: 1,
child: Row(
children: <Widget>[
Text(
'£',
style: TextStyle(fontSize: 20),
),
SizedBox(width: 10),
Expanded(
child: numberFormField(
onChanged: (value) {
setState(() {
collection = double.parse(value);
_updateTotal();
});
},
textFieldKey: null),
),
],
),
),
],
);
}
Row _buildTotal() {
return Row(
children: <Widget>[
Expanded(
flex: 1,
child: Text(
'Total',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
SizedBox(width: 10),
Expanded(
flex: 1,
child: Row(
children: <Widget>[
Text(
'£',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(width: 10),
Expanded(
child: Container(
height: 50,
decoration: BoxDecoration(
color: AppColors.secondaryElement,
borderRadius: Radii.k25pxRadius,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"${formatNumber(amount: total)}",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
],
),
),
),
],
),
),
],
);
}
}

Answer 1

Does this work for you?
class Home extends StatefulWidget{
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home>{
double firstFieldValue = 0;
double secondFieldValue = 0;
double thirdFieldValue = 0;
#override
Widget build(BuildContext context){
return Scaffold(
body: Center(
child: Column(
children: [
TextField(
onChanged: (value){
if(value.isEmpty){
setState(() => firstFieldValue = 0);
}else{
setState((){
firstFieldValue = double.parse(value);
});
}
}
),
TextField(
onChanged: (value){
if(value.isEmpty){
setState(() => secondFieldValue = 0);
}else{
setState((){
secondFieldValue = double.parse(value);
});
}
}
),
TextField(
onChanged: (value){
if(value.isEmpty){
setState(() => thirdFieldValue = 0);
}else{
setState((){
thirdFieldValue = double.parse(value);
});
}
}
),
Text(
"${firstFieldValue + secondFieldValue + thirdFieldValue}"
)
]
)
),
);
}
}