'Using FutureBuilder inside StreamBuilder
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");
}),
Solution 1:[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:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Frank van Puffelen |
