Download and display image from firebase

I am trying to display a users image on their profile page but I don’t know how to download the image from firebase 🙁

this is how I saved the image::

    await AuthService.firebase().createUser(
        email: _email.text,
        password: _password.text,
      );
      final userId = AuthService.firebase().currentUser?.id;
      final destination = 'user-profile-image/$userId';   // here is the location
      final ref = FirebaseStorage.instance.ref(destination);
      await ref.putFile(_photo!);
      imageUrl = await ref.getDownloadURL();
      _userService.createNewUser(
        userId: userId as String,
        userImage: imageUrl as String,
        userEmail: _email.text,
        userFirstName: _userFirstName.text,
        //  userCellNumber: _userCellphoneNumber.text,
        //  userAddress: _userAddress.text,
      );

I am able to get the image url back from when I saved it when the user registered in the application.

here is the code for how I got all the data back ::

  String? _firstName;
  String? _userId;
  String? _imageUrl;
  File? _photo;       // this is where I want to put the file

  getAndSetUserData(userId) async {
    var userData = await _cloudFunctions.getUserInfo(userId: userId!);
    _userId = userId;
    _firstName = userData[userFirstNameColumn];
    _imageUrl = userData[userImageColumn];
    print(_imageUrl);

    log(userData[userFirstNameColumn]);
  }

so now I need to be able to download the image I guess? not sure to be honest

thanks for the help!

>Solution :

you already have the imageUrl. No need to download it. Just display it directly in your UI like so:

 CircleAvatar(
  radius: radius,
  backgroundImage: NetworkImage(imageUrl!)

or with the use of third party caching plugin (which is the recommended way), cache_network_image

          CachedNetworkImage(
                  imageUrl: imageUrl,
                  imageBuilder: (context, imageProvider) => CircleAvatar(
                    radius: radius,
                    backgroundImage: NetworkImage(imageUrl!),
                  ),
                )