Future not setting default value on load - flutter

Question

We are running a Future which should be setting the initial/default at time of load but we cannot seem to get this to work. The default seems to update only state change
return FutureBuilder<List<Payment>>(
future: DatabaseService.getPayments(widget.user!.id),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: [
const Divider(),
ListView.separated(
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return Dismissible(
direction: DismissDirection.endToStart,
key: Key(snapshot.data![index].cardId!),
onDismissed: (direction) {
// Remove the item from the data source.
setState(() {
snapshot.data!.removeAt(index);
});
},
// Show a red background as the item is swiped away.
background: Container(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
color: Colors.red,
alignment: Alignment.centerRight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.delete_forever_outlined,
color: Colors.white,
size: 32,
),
Text(
'Delete',
style: TextStyle(color: Colors.white),
),
],
),
),
confirmDismiss:
(DismissDirection dismissDirection) async {
switch (dismissDirection) {
case DismissDirection.endToStart:
case DismissDirection.startToEnd:
return await _showConfirmationDialog(
context,
'delete',
snapshot.data![index],
widget.user) ==
true;
case DismissDirection.horizontal:
case DismissDirection.vertical:
case DismissDirection.up:
case DismissDirection.down:
case DismissDirection.none:
break;
}
return false;
},
child: ListTile(
onTap: () {
setState(() {
paymentDefault = snapshot.data![index].cardId;
DatabaseService.createDefaultPayment(
context,
snapshot.data![index].cardId,
widget.user!.id);
});
},
leading: CircleAvatar(
backgroundColor:
snapshot.data![index].brand == 'MasterCard'
? Colors.amber[100]
: Colors.blue[100],
radius: 30,
child: loadImage(snapshot.data![index].brand)),
selected:
paymentDefault == snapshot.data![index].cardId,
title: Text('•••• ${snapshot.data![index].last4}'),
subtitle: Text(
'Exp. ${snapshot.data![index].expMonth}/${snapshot.data![0].expYear}'),
trailing:
paymentDefault == snapshot.data![index].cardId
? const Icon(Icons.check, color: Colors.green)
: const SizedBox.shrink(),
));
},
separatorBuilder: (context, index) {
return Divider(
height: 0,
color: Colors.grey[300],
);
}),
],
);
}

Answer 1

Use initialData prop in FutureBuilder
The data that will be used to create the snapshots provided until a non-null future has completed.
return FutureBuilder<List<Payment>>(
initialData: <Your initial Data here> 👈 Here
future: DatabaseService.getPayments(widget.user!.id),
builder: (context, snapshot) {
...
}