Flutter: How to read and fetch the image data of the Firebase Storage in the app?

Question

I'm attempting to fetch an Image from a firebase storage in Widget build.

My Code:

@override
Widget build(BuildContext context) {
  StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('Schedule').snapshots(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshots) {

      return (snapshots.connectionState == ConnectionState.waiting)
          ? const Center(child: CircularProgressIndicator(), )
          : Container(
              child: Column(
              children: [
                if (!snapshots.hasData) ...[
                  Center( child: CircularProgressIndicator(), )
                ] else ...[
                  Column(
                    children: <Widget>[
                      Container(
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: snapshots.data!.docs.length,
                            itemBuilder: (context, index) {
                              final DocumentSnapshot docdata = snapshots.data!.docs[index];

                              Reference imgref = FirebaseStorage.instance.ref().child("${docdata['image']}");
                              var url = imgref.getDownloadURL();
                                return Container(
                                  child: Center(
                                      child: Column(
                                        children: [
                                          Expanded(
                                            flex: 2,
                                            child: Container(
                                              height: 80,
                                              child: Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                  children: [
                                                    // To be added
                                                    Image.network(url.toString()),
                                                    Text( "${docdata['busname']}"),
                                                    Text( "${docdata['bustype']}")
                                                  ]),
                                            ),
                                          ),
                                        ],
                                      ),
                                    
                                  ),
                                );
                               
                            }),
                      ),
                    ],
                  )
                ]
              ],
            ));
    },
  )
}

In Schedules, there's image value which is a location to the image in the Firebase storage

I have referred to the location address of the images to match within the image value from the Firebase database.

But all I get is Invalid Argument, I'm not even certain what to be done for these.

Neither am I certain if the value of the field image is a mistake.

How can I retrieve images from the firebase storage and then display them in my app?

Answer 1

Getting a download URL from Firebase Storage requires a call to the server, so it is an asynchronous operation. This means that the call to imgref.getDownloadURL() returns a Future<String> rather than a String. So you'll need to wrap your result in a FutureBuilder widget to handle the future.

Also see:

• Can't get actual String download url from Firebase Storage and only returns Instance of 'Future<String>' even using async/await
• Using FutureBuilder inside StreamBuilder