Looping through Firestore is ignoring async await? - flutter

Question

So I have an app where I have images stored on Firebase Storage and I want to loop through a few records in my Firestore and create Containers() for each of them to be used in a PageView. However, when looping through it seems like the AWAIT clues are ignored somehow?
This is what I got:
loadDashboard() async {
// Load data about breed in focus
Map<String, dynamic> _documentData;
_isLoadingArticles = true;
_dashboardArticles.clear();
int _articleCount = 0;
await _firestore
.collection('DashboardArticle')
.where("active", isEqualTo: true)
.get()
.then((QuerySnapshot querySnapshot) {
querySnapshot.docs.forEach((doc) {
_articleCount++;
downloadURL(doc["image"]);
print(doc["title"]);
_dashboardArticles.add(
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image(
image: NetworkImage(
_articleImgUrl,
),
alignment: Alignment.center,
width: double.infinity,
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 25),
Text(
doc["title"],
style: TextStyle(
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.black,
offset: Offset(1.0, 1.0),
),
],
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
doc["tagline"],
style: TextStyle(
color: Colors.white,
fontSize: 16,
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.black,
offset: Offset(1.0, 1.0),
),
],
),
)
],
),
),
],
),
),
);
setState(() {
_isLoadingArticles = false;
_totalArticleDots = _articleCount;
});
});
}).catchError((e) => print("error fetching data: $e"));
}
Future<String> downloadURL(String image) async {
await firebase_storage.FirebaseStorage.instance
.ref('dashboard_article_images/$image')
.getDownloadURL()
.then((value) => {
setState(() {
_articleImgUrl = value;
print(_articleImgUrl);
})
})
.catchError((e) => {
setState(() {
_articleImgUrl = "";
})
});
return "";
}
_articleImgUrl is a variable outside that I set as I'm not sure how to get the String value from the Future in any other way.
Each PRINT shows the data in correct order, for example:
flutter: Pooch in focus: Corgi
flutter: https://firebasestorage.googleapis.com:443/v0/b/.../o/article_images%2F4f3... (I truncated here)
When I se breakpoints it seems that _articleImgUrl has no value at the time the _dashboardArticles.add(...) is executed, so it feels like the awaits are skipped when looping somehow?
Invalid argument(s): No host specified in URI file:///
Can anyone provide insights? Thanks!

Answer 1

Yes your await is ignored because you are not awaiting your method downloadURL, also I would not recommend to use querySnapshot.docs.forEach as you won't be able to manage asynchronous operations correctly. You should use for in instead, also you should not use await and then at the same time.
Here is some fix you could apply to your code:
final querySnapshot = await _firestore
.collection('DashboardArticle')
.where("active", isEqualTo: true)
.get().catchError((e) => print("error fetching data: $e"));
for (final doc in querySnapshot.docs) {
_articleCount++;
await downloadURL(doc['image']);
print(doc["title"]);
// rest of your loop ...
}
By doing so you ensure all of your asynchronous operations are correctly awaited.