如何在一个 ListView 中使用多个 StreamBuilder

Question

所以我正在做一个项目，我希望有一个包含多个数据流的列表视图。我正在寻找的是这样的东西，但它都需要在一个列表视图中滚动。

我收到的数据流来自 firebase，变量myData是 firebase 集合的一个实例。我能够构建单个流的一个列表，所以我知道实例是正确的，我不想共享它，因为数据库规则目前处于测试模式。

此代码允许我ListView从单个流构建一个并按预期工作。

Container(
  child: StreamBuilder<QuerySnapshot>(
  stream: myData,
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (snapshot.hasError)
      return new Text('Error: ${snapshot.error}');
    switch (snapshot.connectionState) {
      case ConnectionState.waiting: return new Text('Loading...');
      default:
        return new ListView(
          children: snapshot.data.documents.map((DocumentSnapshot document) {
            return Text(document['color']);
          }).toList(),
        );
      }
    },
  ),
);

从这里开始，我觉得我有 2 个选择，它们是：1）Column从StreamBuilder允许我在一个ListView. 2) 或者将一个List空的放在 ListView 的子项中，并使用 StreamBuilder 以外的其他东西从 firebase 添加到列表中，因为它需要返回的小部件。（事实是我不知道除了 StreamBuilder 之外的另一种方式）任何想法都会受到欢迎。

这是我第一个想法的代码。我希望你能看到这将如何扩展。通过返回 Columns 我可以建立一种流体ListView。这样做的问题是它不会从 Firebase 获取数据，唯一的结果是CircularProgressIndicator.

ListView(
  children: <Widget>[
    StreamBuilder(
      stream: myData,
      builder: (context, snapshot) {
        if (!snapshot.hasData) return CircularProgressIndicator();
        return Column(
          children: List<Widget>.generate(3, (index) {
            return Habit(
              habit: snapshot.data.documents['index']['habit'],
              icon: snapshot.data.documents['index']['icon'],
              text: "figure this out later",
              color: snapshot.data.documents['index']['color'],
              complete: false, // figure this out later
            );
          }),
        );
      }
    ),
    //Second Stream here
  ],
)

如果可以，请提供帮助，我一直在努力解决这个问题 2 或 3 天，并且没有任何朋友/同事问了解 dart/flutter。

Answer 1

您是否检查过Provider 包？您可以使用 a包装多个Streamvia并使用所有流更改。StreamProviderMultiProvider

不知道细节，人们可以想到这样的小部件：

Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      StreamProvider.controller(builder: (_) => StreamController<CollectionA>()),
      StreamProvider.controller(builder: (_) => StreamController<CollectionB>()),
    ],
    child: Consumer2<CollectionA, CollectionB>(
      builder: (context, CollectionA collectionA, CollectionB collectionB, _) {
          
      },
    ),
  );
}