无法从 Firebase 存储中获取实际的字符串下载 url 并且仅返回“未来”的实例<string> ' 甚至使用 async/await</string>

Question

I am trying to get user avatar from firebase storage, however, my current code only returns Instance of 'Future<String>' even I am using async/await as below. How is it possible to get actual download URL as String, rather Instance of Future so I can access the data from CachedNewtworkImage?

this is the function that calls getAvatarDownloadUrl with current passed firebase user instance. myViewModel

  FutureOr<String> getAvatarUrl(User user) async {
    var snapshot = await _ref
        .read(firebaseStoreRepositoryProvider)
        .getAvatarDownloadUrl(user.code);
    if (snapshot != null) {
      print("avatar url: $snapshot");
    }
    return snapshot;
  }

getAvatarURL is basically first calling firebase firestore reference then try to access to the downloadURL, if there is no user data, simply returns null.

  Future<String> getAvatarDownloadUrl(String code) async {
    Reference _ref =
        storage.ref().child("users").child(code).child("asset.jpeg");
    try {
      String url = await _ref.getDownloadURL();
      return url;
    } on FirebaseException catch (e) {
      print(e.code);
      return null;
    }
}

I am calling these function from HookWidget called ShowAvatar. To show current user avatar, I use useProvider and useFuture to actually use the data from the database, and this code works with no problem. However, once I want to get downloardURL from list of users (inside of ListView using index),

class ShowAvatar extends HookWidget {
// some constructors...

 @override
  Widget build(BuildContext context) {
    // get firebase user instance
    final user = useProvider(accountProvider.state).user;
    // get user avatar data as Future<String>
    final userLogo = useProvider(firebaseStoreRepositoryProvider)
        .getAvatarDownloadUrl(user.code);
    // get actual user data as String
    final snapshot = useFuture(userLogo);
    // to access above functions inside of ListView
    final viewModel = useProvider(myViewModel);

    return SingleChildScrollView(
      physics: AlwaysScrollableScrollPhysics(),
      child: Container(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(
              height: 100,
              width: 100,
              child: Avatar(
                avatarUrl: snapshot.data, // **this avatar works!!!** so useProvider & useFuture is working
              ),
            ),
            SizedBox(height: 32),
            ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return Center(
                  child: Column(
                    children: [
                      SizedBox(
                        height: 100,
                        width: 100,
                         child: Avatar(
                           avatarUrl: viewModel
                               .getAvatarUrl(goldWinners[index].user)
                               .toString(), // ** this avatar data is not String but Instance of Future<String>
                         ),
                      ),
                      
                      ),
                    ],
                  ),
                );
              },
              itemCount: goldWinners.length,
            ),

Avatar() is simple statelesswidget which returns ClipRRect if avatarURL is not existed (null), it returns simplace placeholder otherwise returns user avatar that we just get from firebase storage. However, since users from ListView's avatarUrl is Instance of Future<String> I can't correctly show user avatar.

I tried to convert the instance to String multiple times by adding .toString() , but it didn't work.

class Avatar extends StatelessWidget {
  final String avatarUrl;
  final double radius;
  final BoxFit fit;

  Avatar({Key key, this.avatarUrl, this.radius = 16, this.fit})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('this is avatar url :   ' + avatarUrl.toString());
    return avatarUrl == null
        ? ClipRRect(
            borderRadius: BorderRadius.circular(radius),
            child: Image.asset(
              "assets/images/avatar_placeholder.png", 
              fit: fit,
            ),
          )
        : ClipRRect(
            borderRadius: BorderRadius.circular(radius),
            child: CachedNetworkImage(
              imageUrl: avatarUrl.toString(),
              placeholder: (_, url) => Skeleton(radius: radius),
              errorWidget: (_, url, error) => Icon(Icons.error),
              fit: fit,
            ));
  }
}

Answer 1

Since the download URL is asynchronously determined, it is returned as Future<String> from your getAvatarUrl method. To display a value from a Future , use a FutureBuilder widget like this:

child: FutureBuilder<String>(
  future: viewModel.getAvatarUrl(goldWinners[index].user),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    return snapshot.hashData
      ? Avatar(avatarUrl: snapshot.data)
      : Text("Loading URL...")
  }
)

Answer 2

Frank actually you gave an good start but there are some improvements we can do to handle the errors properly,

new FutureBuilder(
            future: //future you need to pass,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return new ListView.builder(
                    itemCount: snapshot.data.docs.length,
                    itemBuilder: (context, i) {
                      DocumentSnapshot ds = snapshot.data.docs[i];
                      return //the data you need to return using /*ds.data()['field value of doc']*/
                    });
              } else if (snapshot.hasError) {

                // Handle the error and stop rendering
                GToast(
                        message:
                            'Error while fetching data : ${snapshot.error}',
                        type: true)
                    .toast();
                return new Center(
                  child: new CircularProgressIndicator(),
                );
              } else {
                // Wait for the data to fecth
                return new Center(
                  child: new CircularProgressIndicator(),
                );
              }
            }),

Now if you are using a text widget as a return statement in case of errors it will be rendered forever. Incase of Progress Indicators, you will exactly know if it is an error it will show the progress indicator and then stop the widget rendering.

else if (snapshot.hasError) {
}

else {

}

above statement renders until, if there is an error or the builder finished fetching the results and ready to show the result widget.