I'm attempting to loop through a list of documents from Firestore passed to a custom action in Flutterflow and display images according to the photo_url field contained in each document. I'm able to loop through and display strings from the document list, but images are where I'm having trouble.
I've tried including the images in the loop itself, using networkImage as per the "pdf" documentation on "https://pub.dev/packages/pdf", but ran into async/await issues as it was inside the "build" function. So I then placed a second loop at the beginning of my function to populate a list of images to be added to the pdf later during the loop in the build function, but the action fails when I attempt to use networkImage.
Loop:
final doc_imgs = [];
for (final doc in docs) {
if (doc.photoUrl.isNotEmpty) {
final img = await networkImage(doc.photoUrl);
doc_imgs.add(img);
}
}
Update: After further testing, networkImage works with other URLs, just not the ones passed by Firestore.
It looks like you're running into issues with displaying images from Firestore URLs using the networkImage
function. Since you mentioned that the function works with other URLs but not with the ones retrieved from Firestore, there are a few things you can check and try to fix the problem:
print(doc.photoUrl)
to see if there are any discrepancies.[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
Use the Firebase CLI to deploy it:
gsutil cors set cors.json gs://your-bucket-name
build
:async
in the build
function, you could try pre-fetching the images using a FutureBuilder or similar technique. For example:
Future<Uint8List> fetchImage(String url) async {
final response = await http.get(Uri.parse(url));
return response.bodyBytes;
}
FutureBuilder<Uint8List>(
future: fetchImage(doc.photoUrl),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Image.memory(snapshot.data);
} else {
return CircularProgressIndicator();
}
},
);
CachedNetworkImage
instead of networkImage
, as it handles caching and provides more flexibility:
CachedNetworkImage(
imageUrl: doc.photoUrl,
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
);