How to use FutureBuilder to increment a variable outside Build method - flutter

Question

I have FutureBuilder that consumes data in my firstore.
The data is of a list of grocery items along with their prices and how many times they were purchased.
The FutureBuilder is showing them in a listview.
What I want to do, is to show the user the total for this particular list.
So I initialized a double before the build method.
While the listview is iterating through the items, I'm adding to the double to get the total and then displaying it at the bottom of the page.
class _PreviousCartState extends State<PreviousCart> {
Future<DocumentSnapshot> snapshot;
#override
void initState() {
super.initState();
snapshot = FirestoreAPI.getWithDate(widget.date);
}
double total = 0;
#override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: Column(
children: [
Expanded(
flex: 12,
child: FutureBuilder(
future: snapshot,
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
default:
if (snapshot.hasData) {
if(snapshot.data.data.length == 0) {
return AlertDialog(
content: Text('Wrong Date', textAlign: TextAlign.center, style: TextStyle(color: Colors.black)),
backgroundColor: Colors.redAccent,
actions: [Icon(Icons.keyboard_backspace)],
);
}
List<dynamic> items = snapshot.data.data['items'];
return ListView.builder(
itemCount: items.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(7),
child: Row(
children: [
Text('Number'),
Text('Name'),
Text('Price')
],
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
),
);
}
index--;
final currentItem = items[index];
this.total += currentItem['price'] * currentItem['count']; // HERE
print('LOOK AT ME $this.total'); // HERE
return Card(
child: ListTile(
leading: Text('${index + 1}'),
title: Center(child: Text(currentItem['name'])),
subtitle: Center(
child: Text(
'''Bought ${currentItem["count"]} times for a total of ${currentItem['price'] * currentItem["count"]} dirhams''')),
trailing: Text('${currentItem["price"]} Dhs'),
),
);
},
);
} else
return Text(snapshot.error.toString());
}
}),
),
Expanded(
flex: 1, child: Center(child: Text('Total: ${this.total}'))),
],
),
);
}
}
After a restart, the total is 0.0.
A hot reload after that, it shows the correct total.
A hot reload after that, it shows double the correct total.
then 3 times the correct total.
and so on ...
This is even though the print statement right after the addition is counting up correctly.
Please explain to me why is this happening??

Answer 1

From what I see is you need to use SetState.
setState(() { total += currentItem['price'] * currentItem['count']; });
According to the docs:
Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.
When you trigger setState it will rebuild the view and immediately see the changes implied by the new state. Basically it's like hot reload.