Flutter: I am trying to read the URL in the data from the Firestore

Question

I am trying to store only the URL from the specific document from firebase because I want to use it for my background image. I tried a couple of tutorials from youtube, but most of the tutorials do not teach how to do it. I am new to flutter and programming.

I want to store the URL because I am trying to make a login page that can upload the profile picture. the code below is the widget I am trying to make.

Widget imageProfile() {
  return Center(
    child: Stack(
      children: <Widget>[
        CircleAvatar(
            radius: 80.0,
            backgroundImage: _photo == null
                ? const AssetImage('assets/images/user1.png') as ImageProvider
                : FileImage(File(_photo!.path))),
              // backgroundImage: 
        Positioned(
          bottom: 20.0,
          right: 20.0,
          child: InkWell(
            onTap: () {
              showModalBottomSheet(
                context: this.context,
                builder: ((builder) => bottomSheet()),
              );
            },
            child: const Icon(
              Icons.camera_alt,
              color: Colors.white,
              size: 28.0,
            ),
          ),
        ),
      ],
    ),
  );
}

my firebase data

I'm struggling to understand what you want to achieve. What is the question exactly? In the sentences you made, you said you want to store the URL, but then in the Firestore screenshot you've stored it already. — Obum, Jul 12 '22 at 00:32
Does this answer your question? [How to get URL from Firebase Storage getDownloadURL](https://stackoverflow.com/questions/37374868/how-to-get-url-from-firebase-storage-getdownloadurl) — paulsm4, Jul 12 '22 at 00:33
Concerning the code you posted, there's some _photo rendering as background of CircleAvatar. I guess that's where you want to show the image from Firestore. Are you asking how to get the image link from Firestore and render it here or how to save the image to Firestore after it has been uploaded to Firebase Storage. And if you're asking about saving the link, you should also be showing us the part of the code that where you are attempting to do that or at least getting the link in the first place — Obum, Jul 12 '22 at 00:35
@ObumunemeNwabude sorry for my confusing question, my question was how to get the image link from Firestore and use it as my backgroundImage — paulchou, Jul 12 '22 at 13:20
Okay, paste the full code of that file so that we know how to introduce reading the imageUrl from that particular user's document. Also, CachedNetworkImage proposed in the answer should e a good option — Obum, Jul 13 '22 at 10:52

score 0 · Answer 1 · answered Jul 12 '22 at 04:19

I think what you want to achieve can directly be achieved by using cached_network_image package.

This is how to you can use it,

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     )

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        progressIndicatorBuilder: (context, url, downloadProgress) => 
                CircularProgressIndicator(value: downloadProgress.progress),
        errorWidget: (context, url, error) => Icon(Icons.error),
     )

Flutter: I am trying to read the URL in the data from the Firestore

1 Answers1