Download and display image from firebase-CodePudding

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!

CodePudding user response：

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!),
                  ),
                )