Flutter + Firebase : How to view images depend on id?

Question

I have an app show data from firebase ,and image in folder called category in firebase storage ,the name of image is same id field of collections.

now I want to view data and view image of same field :

child: ListView.builder(
        padding: EdgeInsets.all(10),
        itemCount: doctorData.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 15,
            child: ListTile(
              leading: Container(
                  width: 60,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30)),
                  child: Image(
                    image: NetworkImage(
                        'gs://myproject.appspot.com/categories/categories/${doctorData[index]['id']}.png'),
                  )
                  ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Detail(doctorData[index]),
                  ),
                );
              },
              title: Text('Dr. ${doctorData[index]['name_en']}',
                  style: TextStyle(fontSize: 22)),
              subtitle: Text('?. ${doctorData[index]['name_ar']}',
                  style: TextStyle(fontSize: 22)),
            ),
          );
        }),
  ),

The image isn't shown , How can I view the image

question from:https://stackoverflow.com/questions/65861496/flutter-firebase-how-to-view-images-depend-on-id

Answer 1

I had the same issue, but after a while i figured this out. I used Futurebuilder and CachedNetworkImageProvider and they are solved my problem.

If you want to you the CachedNetworkImageProvider you need this in the pubspec.yaml.

dependencies:
  cached_network_image: ^2.3.3

FutureBuilder<dynamic>(
  future: FirebaseStorage().ref('yourImage.jpg').getDownloadURL(),
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
     if (snapshot.connectionState != ConnectionState.waiting) {
         return Image(
            image: CachedNetworkImageProvider(snapshot.data.toString()),
            fit: BoxFit.cover,
         );
     } else {
         return Text('Loading image....');
     }
  },
),