Using FutureBuilder inside StreamBuilder

Question

I am trying to listen for changes in specific user document in 'users' Firestore and get from this document avatarPath. When I get it I want to request for download url of user's avatar (specific avatarPath) in Storage. I can get those data (avatarPath and download url) but FutureBuilder isn't executed and finally it returns Text('avk') in StreamBuilder.

Is there any way to build avatar with just only one Builder function/query? or maybe is there some functionality I don't know

StreamBuilder(
stream: FirebaseFirestore.instance
  .collection('users')
  .where('uid',
      isEqualTo: currentUser!.uid)
  .snapshots(), 
builder: (BuildContext context,
  AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasData) {
  final storageRef =
      FirebaseStorage.instance.ref();
  final avatarPath = snapshot
      .data!.docs[0]
      .get('avatarPath');

  FutureBuilder(
    future: storageRef
        .child(avatarPath)
        .getDownloadURL(),
    builder: (context, snapshot) {
      return SizedBox(
        width: 128,
        height: 128,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 3,
            ),
            borderRadius:
                BorderRadius.circular(
                    100),
          ),
          child: Image.network(
              snapshot.data.toString()),
        ),
      );
    },
  );
}
return Text("avk");
}),

Answer 1

You're loading documents for the users from Firestore, which is an asynchronous operation. Then you load an image for each user from Cloud Storage, which is a separate asynchronous operation. Using separate builders for these (a StreamBuilder for the documents, and a FutureBuilder for each image) seems correct to me, as each asynchronous operation has its own lifecycle and the builder wrap that for you.

Also see:

• How do I join data from two Firestore collections in Flutter?