Flutter ValueNotifier in ListView - flutter

Question

I have a ListView.builder showing a card for each of my images. On each card, I have an uploadFunction() and a SyncStatus. Syncstatus is enum with uploading, downloading, synced, and not synced. Now when I call uploadFunction(), the syncStatus changes to uploading and a circular progress indicator appears within the card. Now I want to show how much percentage is uploaded by passing a value to the CircularProgressIndicator(). This value resides in the uploadFunction(). How I can do so?
At first, I thought of creating a ValueNotifier set to value 0 for each card within the ListView.builder's itemBuilder and pass it to the uploadFunction(), which will change its value but I don't see any change in the UI.
This is my ListView.builder code:
ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: documentsList.length,
itemBuilder: (BuildContext context, int index) {
return DocCard(
//I pass syncStatus value so that my DocCard can show whether the document is uploaded or not;
mySyncStatus: documentsList[index].syncStatus,
uploadDocumentOnPressed: () async {
if (documentsList[index].syncStatus ==
SyncStatus.notSynced) {
documentsList[index].syncStatus =
SyncStatus.uploading;
setState(() {});
Document myDoc;
myDoc = await databaseHelper.getDocumentValues(
docId: documentsList[index].docId);
//call uploadFunction
await uploadDocumentInCloud(myDoc: myDoc,).then((value) {
if (value) {
documentsList[index].syncStatus =
SyncStatus.synced;
setState(() {});
} else {
documentsList[index].syncStatus =
SyncStatus.notSynced;
setState(() {});
}
});
}
},
);
},
),
and this is my DocCard class code:
class DocCard extends StatefulWidget {
DocCard({
#required this.uploadDocumentOnPressed,
#required this.mySyncStatus,
});
final Function uploadDocumentOnPressed;
final SyncStatus mySyncStatus;
#override
State<DocCard> createState() => _DocCardState();
}
class _DocCardState extends State<DocCard> {
#override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
child: Row(
children: [
IconButton(
onPressed: widget.uploadDocumentOnPressed,
icon: const Icon(
Icons.cloud_download_outlined,
color: Colors.blue,
),
),
syncStatusWidget(),
],
),
);
}
Widget syncStatusWidget(){...}
}
The syncStatusWidget() returns a widget according to the value of syncStatus passed:
Widget syncStatus() {
switch (widget.mySyncStatus) {
case SyncStatus.uploading:
{
return Container(
height: 20,
width: 20,
child: const CircularProgressIndicator(
color: Colors.white,
strokeWidth: 1,
),
);
}
break;
case SyncStatus.synced:
{
return const SizedBox.shrink();
}
break;
case SyncStatus.notSynced:
{
return notSyncedIcon;
}
break;
case SyncStatus.downloading:
{
return Container(
height: 20,
width: 20,
child: const CircularProgressIndicator(
color: Colors.white,
strokeWidth: 1,
),
);
}
break;
}
}
and the uploadFucntion has the total progress of the downloading or the uploading.