Display out my images stored in Firebase Storage by referring to the lists of image paths in my Firestore Database

Issue

enter image description here

So, I have this document that contains a list of image path that its file have been stored inside Firebase Storage. So my problem here is, how can I use future builder to load out all the images.

I have try to display out a single file with this method and its works but I just cant connect the way to display out all the file by using Future Builder.

FutureBuilder(
   future: storage.downloadURL(annData.imagePath),
   builder: (BuildContext context,
       AsyncSnapshot<String> snapshot) {
   if(snapshot.connectionState == ConnectionState.done && snapshot.hasData)
  {
     return Container(
       width: 200,
       height: 200,
        child: InteractiveViewer(
           child: AspectRatio(
             aspectRatio: 1,
               child: ClipRRect(
                 child: Image.network(
                  snapshot.data!,
                   fit: BoxFit.contain,
               ),
             ),
           ),
         ),
       );
   }
   if(snapshot.connectionState == ConnectionState.waiting)
   {
       return Loading();
   }
     return Container();
  },
),

And this is my downloadURL method

Future<String> downloadURL(String imagePath) async {
  String downloadURL = await FirebaseStorage.instance.ref('test/$imagePath').getDownloadURL();

  return downloadURL;
}

My imagePath in database is a List.

Solution

As suggested by @Frank van Puffelen,If you have an array of image paths, you’ll want to loop over those and generate a separate FutureBuilder for each of them.

Answered By – Sathi Aiswarya

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *