How to update a Widget inside a List - flutter

Question

I have a list of chats, and I want to show on each chat card, if there's a new message that the user hasn't read.
The list is in a StatefulWidget, the list contains refactored cards that are also StatefulWidgets, I also made the code to work with Firestore to check if the user has read the message, but still I don't know what's happening, because it doesn't update the icon of unread messages.
The data changes in the database, but it doesn't in the chat card. If I reload the app, because the cards are rebuilt, then it does change.
Here's the chat card code:
bool hasUnreadMessages = false;
void unreadMessagesVerifier() {
setState(() {
_firestore.collection('chatRoom').document(_chatRoomID).get().then((data) async {
hasUnreadMessages = await data['hasUnreadMessages'];
});
});
}
#override
Widget build(BuildContext context) {
unreadMessagesVerifier();
return GestureDetector(
child: Stack(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
widget.lastMessage,
),
),
),
hasUnreadMessages
? Container(
margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
child: CircleAvatar(
radius: 7,
backgroundColor: Colors.blue,
),
)
: SizedBox(),
],
),
),
],
),
onTap: widget.onTap,
); // ChatCard
}
If more info is needed, do let me know!
========================================================================
EDIT:
Fixed thanks to #Pedro R.
I just had to move the SetState() and check the mounted
void unreadMessagesVerifier() {
_firestore.collection('chatRoom').document(_chatRoomID).get().then((data) async {
if (mounted) {
setState(() {
hasUnreadMessages = data['hasUnreadMessages'];
});
}
});
}

Answer 1

I think your problem lies in the way you are calling setState.
Try calling it after the future finishes.
Like this:
void unreadMessagesVerifier() {
_firestore.collection('chatRoom').document(_chatRoomID).get().then((data) =>
data['hasUnreadMessages'].then(result){
setState((){
hasUnreadMessages = result;
});
});
}
Sorry for the formatting by the way.

Answer 2

Consider using StatefulBuilder class, it rebuilds the particular Widget which it wraps based upon the value getting updated
So, hasUnreadMessage will be used to update the Container(). Do something like this
StatefulBuilder(
builder: (BuildContext context, StateSetter setState){
// here you return the data based upon your bool value
return hasUnreadMessages ? Container(
margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
child: CircleAvatar(
radius: 7,
backgroundColor: Colors.blue,
)
) : SizedBox();
}
)