如何在<Widget>流构建器中将此未来作为小部件返回

Question

我有一个函数，它将作为Future<widget>,返回，现在我面临的问题是我正在调用Stream builder内部的函数，我将如何获得未来的小部件函数

这是我的函数

Future<Widget> overlapped(Map id) async {
final overlap = 16.0;
List liImage = [];
final result = await firestore.collection('community').doc(id['id']).get();
final listofMembers = result.data()!['members'];
setState(() {
liImage = listofMembers;
});
if (liImage.isNotEmpty) {
final imag = liImage.map((e) async {
final imageList = await firestore.collection('users').doc(e).get();
final im = imageList.data()!['picture'];
return im;
});
final items = imag
.map<Widget>(
(e) => CircleAvatar(
backgroundColor: Colors.transparent,
backgroundImage: NetworkImage('e'),
),
)
.toList();
List<Widget> stackLayers = List<Widget>.generate(items.length, (index) {
return Padding(
padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
child: items[index],
);
});
return Stack(children: stackLayers);
} else {
return SizedBox();
}

我正在调用StreamBuilder中的函数

Expanded(
child: StreamBuilder<QuerySnapshot<Map>>(
stream: firestore
.collection('community')
.where('members', whereNotIn: [
auth.currentUser!.uid,
])
.limit(10)
.snapshots(),
builder: (context, snapshot) {

return ListView.separated(
separatorBuilder: (context, index) =>
SizedBox(
width: 15,
),
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {

return GestureDetector(

child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(6.0),
bottomLeft:
Radius.circular(6.0),
),
),
child: Stack(children: [
Column(
children: [
Container(
width: 152.0,
height: 48.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(
topLeft:
Radius.circular(
6.0),
topRight:
Radius.circular(
6.0),
),
color: Colors.blue,
image: DecorationImage(
fit: BoxFit.cover,
image:
CachedNetworkImageProvider(
sugComm['comImage'],
errorListener: () =>
Icon(Icons.error),
),
),
),
),
SizedBox(
height: 30.0,
),
Text(
// 'Wack movies',
sugComm['comName'] ?? '',
style: TextStyle(
fontSize: 15.0,
fontWeight:
FontWeight.w600,
),
),
SizedBox(
height: 10.0,
),
overlapped(sugComm),
SizedBox(height: 10.0),
Text(
sugComm['members'].length ==
0
? '${sugComm['members'].length ?? 0} Member'
: '${sugComm['members'].length ?? 0}+ Members',
),
ElevatedButton(
onPressed: () {
firestore
.collection(
'community')
.doc(sugComm['id'])
.update({
'members': FieldValue
.arrayUnion([
auth.currentUser!.uid
])
});
},

Answer 1

你可以使用FutureBuilder。

下面是一个用法示例:

FutureBuilder<Widget>(
future: overlapped(sugComm),
builder: (context, snapshot) {
if (snapshot.hasData) {
return snapshot.data!;
} else if (snapshot.hasError) {
return Text("There is an error: ${snapshot.error}");
} else {
return const Center(child: CircularProgressIndicator());
}
},
);

然而，更常见的是等待你的数据从Firestore而不是Widget。

假设您的overlapped()返回一个List<String>。这就是它看起来的样子:

FutureBuilder<List<String>>(
future: overlapped(sugComm),
builder: (context, snapshot) {
if (snapshot.hasData) {
final items = snapshot.data!
.map<Widget>(
(e) => const CircleAvatar(
backgroundColor: Colors.transparent,
backgroundImage: NetworkImage('e'),
),
)
.toList();
List<Widget> stackLayers =
List<Widget>.generate(items.length, (index) {
return Padding(
padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
child: items[index],
);
});
return Stack(children: stackLayers);
} else if (snapshot.hasError) {
return Text("There is an error: ${snapshot.error}");
} else {
return const Center(child: CircularProgressIndicator());
}
},
);