How to get the related image from Firebase storage in flutter - firebase

Question

I'm trying to build a list of widgets that are displayed using streambuilder for each entry in my cloud firestore. Here's the code:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ProperHomeScreen extends StatefulWidget {
#override
_ProperHomeScreenState createState() => _ProperHomeScreenState();
}
class _ProperHomeScreenState extends State<ProperHomeScreen> {
final _firestore = Firestore.instance;
String _downloadURL;
StorageReference _reference = FirebaseStorage.instance.ref();
#override
void initState() {
super.initState();
}
void postsStream() async {
await for (var snapshot in _firestore.collection('posts').snapshots()) {
for (var post in snapshot.documents) {
print(post.data);
}
}
}
testFunction(postImage) async {
print('Here\'s the postImage data from test function: $postImage');
String downloadAddress = await _reference.child(postImage).getDownloadURL();
setState(() {
_downloadURL = downloadAddress;
});
print('THIS IS THE DOWNLOAD URL FROM THE TEST FUNCTION! ::: $_downloadURL');
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
StreamBuilder<QuerySnapshot> (
stream: _firestore.collection('posts').snapshots(),
builder: (context, snapshot) {
if(!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.lightBlueAccent,
),
);
}
final posts = snapshot.data.documents;
List<Widget> postWidgets = [];
for (var post in posts) {
final postText = post.data['questionOne'];
final postSender = post.data['email'];
final postImage = post.data['filePath'];
testFunction(postImage);
print('THIS IS THE DOWNLOAD ADDRESS : $_downloadURL');
final postWidget = Container(
child: Column(
children: <Widget>[
Text('$postText from $postSender with image : $postImage'),
Image.network('$_downloadURL'),
],
),
);
postWidgets.add(postWidget);
}
return Column(
children: postWidgets,
);
},
),
],
),
);
}
}
In the console, it is printing urls fine, but the problem I have is that it keeps running the testFunction() continuously until I stop main.dart.
I'm trying to show a different image for each post.
Essentially, I am saving data in cloud firestore and saving images in firebase storage. I'm storing the file name of the image in cloud firestore so that I can access it.
Here's a sample of how I'm saving a post in firestore:
void submitPostSection() {
DateTime now = DateTime.now();
_firestore.collection('posts').add({
'email': loggedInUser.email,
'date': now,
'questionOne': widget.questionOne, //this is a simple string. Example data: 'Here is the latest post today 31st July 2020'
'filePath' : _filePath, // this is just the image name that its saved as in firebase storage. datatype for this is string. here's an example of the data: 'myimage2.jpg'
});
}
I think the problem is because the method keeps getting called and setting state of _downloadURL. I'm not really sure the best way to go about this.
Any ideas?
Thanks in advance!

Answer 1

The problem is that inside testFunction() you are calling setState() which will keep calling the build() method, you can do the following:
List<String> listOfUrl = [];
for (var post in posts) {
final postText = post.data['questionOne'];
final postSender = post.data['email'];
final postImage = post.data['filePath'];
String downloadAddress = await _reference.child(postImage).getDownloadURL();
listOfUrl.add(downloadAddress);
}
ListView.builder(
shrinkWrap: true,
itemCount: listOfUrl.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(listOfUrl[index]),
],
),
);
});
add the urls inside a list and then use a listview to display them.

Answer 2

I've solved my problem. I deleted the testFunction() and just saved the actual imageURL inside the cloud firestore document. Then I can access it really easily by adding the following line:
final postImageUrl = post.data['imageURL'];