Flutter: FlatButton not changing child on onPressed - flutter

Question

I wanted to change a value in firestore by a button onPressed. I know there might be seconds delay and I wanted to show a CircularProgressIndicator widget while waiting. But It's not not working.
Here is my widget:
Widget save(String id) {
return new FutureBuilder(
future: PostController().isAlreadySaved(id),
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
if (snapshot.hasData) {
if (snapshot.data) {
return FlatButton(
onPressed: () {
setState(() {
isSaveLoading = true;
});
PostController().deleteSaved(id);
setState(() {
isSaveLoading = false;
});
},
child: !isSaveLoading
? Icon(
MyFlutterApp.star,
size: 30,
color: Colors.redAccent,
)
: SizedBox(
height: 15,
width: 15,
child: CircularProgressIndicator(
strokeWidth: 1,
),
),
);
} else {
return FlatButton(
onPressed: () {
setState(() {
isSaveLoading = true;
});
PostController().save(context, id);
setState(() {
isSaveLoading = false;
});
},
child: !isSaveLoading
? Icon(
MyFlutterApp.star,
size: 30,
color: Colors.grey,
)
: SizedBox(
height: 15,
width: 15,
child: CircularProgressIndicator(
strokeWidth: 1,
),
),
);
}
} else {
return Container(
//color: Colors.white,
width: Adapt.screenW(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Shimmer.fromColors(
baseColor: Colors.grey[400],
highlightColor: Colors.grey[50],
enabled: true,
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
child: new Icon(
MyFlutterApp.star,
size: 30,
color: Colors.white,
),
),
],
),
),
),
],
),
);
}
},
);
}
Here is my isAlreadySaved() function:
Future<bool> isAlreadySaved(String id) async {
bool isSaved = false;
QuerySnapshot snapshot =
await databaseReference.collection('saved').getDocuments();
snapshot.documents.forEach((a) async {
if (a.data['postID'] == id&&
a.data['saver'] == globals.currentUser.uid) {
isSaved = true;
}
});
return isSaved;
}
The delete function actually deletes the document from my saved collection in firestore and the save function creates a document and saves.
Thank you in advance!

Answer 1

I think the problem is because you update the widget tree too fastly, or the flutter UI thread is locked by waiting the PostController job to finish...
In these lines:
onPressed: () {
setState(() {
isSaveLoading = true;
});
PostController().deleteSaved(id);
setState(() {
isSaveLoading = false;
});
},
Here I see that you want to update the loading state of the button. But the problem is that when you set isSaveLoading to true you don't wait for the PostController().deleteSaved(id) to finish before resetting isSaveLoading to false.
On another side, if PostController().deleteSaved() is doing a long job, since it's not async, it can lock the UI thread for a time, so you will never see your circular progress bar.
You can make the onPressed callback async and await for the PostController job.
onPressed: () async {
setState(() {
isSaveLoading = true;
});
// The deleteSaved function have to be async too
await PostController().deleteSaved(id);
setState(() {
isSaveLoading = false;
});
},
Hope this will help!