(Flutter) How to retrieve Firebase Storage images in a Streambuilder with the paths stored in Firestore

Question

In my code, I have a streambuilder that returns items from Firestore using the geoflutterfire package to load items that are within a radius of the user.

These items are loaded, along with the food title, allergies, and age which are retrieved from Firestore. Along with the mentioned fields, there is also an imagePath field.

The image path is a subItem in the test folder in Firebase Storage:

Right now, there is a placeholder image, the image of the MacBook, over the spot where I want my image to be. Since the query loads the image path along with the name, allergies, etc, is it possible to show an image given its image path inside of a streambuilder? Here is the code for the query and streambuilder.

Query:

var collectionReference = FirebaseFirestore.instance.collection('requests');
double radius = 1000;
String field = 'position';
Stream<List<DocumentSnapshot>> stream = geo.collection(collectionRef: collectionReference)
                                        .within(center: center, radius: radius, field: field);

Streambuilder: (Scroll to //CODE OF PLACEHOLDER IMAGE to find placeholder image)

StreamBuilder(
            stream: stream,
            builder: (BuildContext context,
                AsyncSnapshot<List<DocumentSnapshot>> snapshots) {
              if (snapshots.connectionState == ConnectionState.active &&
                  snapshots.hasData) {
                return  ListView(
                  physics: const BouncingScrollPhysics(),
                      children: snapshots.data!.map(
                        (DocumentSnapshot document) {
                          Map<String, dynamic> data =
                              document.data()! as Map<String, dynamic>;
                          return  Container(
                decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                color: const Color(0xff303434),
                ),
                child: Row(
                children: [
                  //CODE OF PLACEHOLDER IMAGE
                 Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(40.0),
                    child: Image.network(
                        'https://picsum.photos/250?image=9',

                      fit: BoxFit.fill,
                      width: 150,
                      height: 150,
                    ),
                  ),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ConstrainedBox(
                      constraints: const BoxConstraints(
                        maxWidth: 140,
                      ),
                      child: AutoSizeText(
                        data['foodCategory'].toString(),
                        maxLines: 1,
                        style: GoogleFonts.poppins(
                          color: Colors.white,
                          fontSize: 25,
                          fontWeight: FontWeight.w900,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    ConstrainedBox(
                      constraints: const BoxConstraints(
                        maxHeight: 70.0,
                        maxWidth: 140,
                      ),
                      child: AutoSizeText(
                        data['allergens'],
                        minFontSize: 10,
                        maxFontSize: 25,
                        style: GoogleFonts.poppins(
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    AutoSizeText(
                       data['ageNum'].toString() +
                          ' ' +
                           data['ageUnit'].toString(),
                      maxLines: 1,
                      style: GoogleFonts.poppins(
                        color: Colors.white,
                        fontSize: 15,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
                ],
                ),
              );
                        },
                      ).toList(),
                );
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),

Answer 1

Your image url are wrong. You should get image url after upload image to Firestore

Example below code:

var file = _imageFile;
    FirebaseStorage firebaseStorage = FirebaseStorage.instance;
    Reference ref = firebaseStorage.ref(
        'uploads-images/${user.userId}/images/${DateTime.now().microsecondsSinceEpoch}');
    TaskSnapshot uploadedFile = await ref.putFile(file);
    if (uploadedFile.state == TaskState.success) {
      downloadUrl = await ref.getDownloadURL();
    }

And iamgePath is downloadUrl

Check your rule on Firestore if you don't want to authenticate Firestore