Flutter Development. Getting data from Firebase Storage and Firestore through Stream Builder

Question

I am trying to get data from Firestore Database and Firestore Storage. I am getting text data from Firestore Database collections but I am not able to get images from Firestore Storage. Its giving Exception. I should use Download URLs : To request a download URL, call the getDownloadURL method on a reference. Can anyone guide me where and how I can use it and get images. https://firebase.flutter.dev/docs/storage/usage/#download-urls

Following is code ;

StreamBuilder<QuerySnapshot>(
    stream: db.collection('running').snapshots(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return StaggeredGridView.countBuilder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            itemCount: snapshot.data!.docs.length,
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 20.0,
            itemBuilder: (context, index) {
              DocumentSnapshot ds = snapshot.data!.docs[index];
              final shoes = Shoes.runningShoes[index];
              return Column(
                children: [
                  Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          color: Color(0xffF6F6F6)),
                      child: Column(
                        children: [
                          SizedBox(height: 60.0),
                          Image.network(
                            'https://firebasestorage.googleapis.com/v0/b/shoes-app-e2319.appspot.com/o/${ds['image']}',
                            width:
                                MediaQuery.of(context).size.width,
                          ),
                          Align(
                              child: Padding(
                                padding: const EdgeInsets.only(
                                    right: 16.0),
                                child: Image.network(
                                  'https://firebasestorage.googleapis.com/v0/b/shoes-app-e2319.appspot.com/o/${ds['logo']}',
                                  height: 60,
                                  width: 40,
                                  color: Color(0xffCBCBCB),
                                ),
                              ),
                              alignment: Alignment.bottomRight),
                        ],
                      )),
                  Padding(
                    padding: const EdgeInsets.only(top: 20.0),
                    child: Row(
                      mainAxisAlignment:
                          MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '\$${ds['price']}',
                          textScaleFactor: 1.5,
                          style: TextStyle(
                              fontWeight: FontWeight.w500),
                        ),
                        FavoriteButton(valueChanged: () {})
                      ],
                    ),
                  ),
                  Flexible(
                      child: Padding(
                    padding: const EdgeInsets.only(top: 10.0),
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        ds['name'],
                        style: TextStyle(fontSize: 18.0),
                      ),
                    ),
                  ))
                ],
              );
            },
            staggeredTileBuilder: (index) {
              return StaggeredTile.count(
                  1, index.isEven ? 2.1 : 2.2);
            });
      } else if (snapshot.hasError) {
        return CircularProgressIndicator();
      } else {
        return CircularProgressIndicator();
      }
    },
  )

Hey Muhammad. Did you make any progress on this? I tried to help with an answer below. Did you have a chance to check that out, and does it make sense and explain why your code isn't working and how to address the problem? If my answer was useful, click the upvote button (▲) to the left of it (you may not yet have enough reputation for this). If it answered your question, click the checkmark (✓) to accept it. That way others know that you've been (sufficiently) helped. Also see What should I do when someone answers my question? — Frank van Puffelen

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2021-08-12T14:18:51

URLs such as https://firebasestorage.googleapis.com/v0/b/shoes-app-e2319.appspot.com/o/${ds['logo'] are not publicly readable by default, so they can't necessarily be read by Image.network(..) (which knows nothing about Firebase/Cloud Storage).

You have a few options:

Mark the Storage bucket as publicly readable.

This is very quick to do (see docs here), but does mean that everyone can then access any file in that bucket.
Use the Firebase SDK to read the data for the image.

You can use the Firebase SDK to get the data from the file, and then construct an image from that data.

Also see: Retrieve Firebase storage image without getting downloadurl flutter
Use a download URL.

A download URL from Firebase Storage looks similar to the URL that you have, but adds an unguessable token to it. This URL then allows public, read-only access to that file. These URLs are the easiest to work with, as any HTTP library can handle them, but it means you must generate the download URL through the Firebase SDK.

Also see Downloading Files from firebase storage to flutter

Flutter Development. Getting data from Firebase Storage and Firestore through Stream Builder

1 Answers