How to load multiple images from FirebaseStorage in flutter when permissions is needed?

Viewed 503

What I'm trying to do is to show list of items as Card widget each. So each Card will contains an Image, title, text, button.. similar to this:

enter image description here

steps are:

1- Load products-data from Firebase-Store using StreamBuilder(Done).

2- Thumbnail URL of the products loads from database then loads image from Firebase-Storage using NetworkImage (Done).

3- I believe this is a wrong way to load the images, because this will not work after changing the security rules of the Firebase-Storage which is expected.

My new FirebaseStorage rules: allow read, write: if request.auth != null;

4- To fix that, I am working on loading images to the memory using getData()

final FirebaseStorage storage = FirebaseStorage(
      app: Firestore.instance.app,
      storageBucket: 'gs://...'
);

  Uint8List imageBytes;
  String errorMsg;

SOME_CONSTRUCTOR() {
  storage
    .ref()
    .child(imageTitle)
    .getData(10000000)
    .then(..)..
}

then Load the image from memory:

Image.memory(imageBytes, fit: BoxFit.cover,)

this works fine but, I am looking for the best practice for this, and here's my questions:

A- Is this (fetch image) code should be part of the load-from-db(the 'stream' of streamBuilder) or later inside creating-Cards from fetched data from db (the 'builder' of the streamBuilder)?

B- Is there any possibility to load image while loading from db, assume every record in db has an image(1-to-1), so it will be like this:

fetch row-> download its image 

fetch row-> download its image 

THEN NEXT ROWs...

?

C- Or it's better to load Items then build Cards, then load images after that while the Cards are visible for the users?

D- Any other advices that may help me dealing with this?

0 Answers
Related