How to use multiple StreamBuilders in one ListView

Question

So I am working on a project where I would like to have one List view that contains multiple streams of data. What I am looking for is something like this, but it all needs to be scrollable in one list view.

The data stream I am receiving is from firebase and the variable myData is an instance of a firebase collection. I am able to build one list of a single stream so I know the instance is correct, I don't want to share it because the database rules are in a test mode at the moment.

This code allows me to build a single ListView from a single stream and works as expected.

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(),
        );
      }
    },
  ),
);

From here I felt I had 2 options which would be: 1) to build and return a Column from the StreamBuilder allowing me to have multiple streams in one ListView . 2) or to place a List that was empty inside the children of ListView and add to the list from firebase using something other than StreamBuilder since it requires a returned Widget. (Thing is I don't know another way apart from StreamBuilder) Any ideas would be welcome.

Here is my code from the 1st idea. I hope you can see how this would be scalable. By returning Columns I can build one fluid ListView . The problem with this is that it will not get data from Firebase, the only result is a 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
  ],
)

Please help if you can, I have been working on resolving this for 2 or 3 days and don't have any friends/colleagues to ask that understand dart/flutter.

Answer 1

Have you checked Provider package ? You can wrap multiple Stream 's via StreamProvider with a MultiProvider and consume all the stream changes.

Not knowing the details, one could think of a widget like so:

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, _) {
          
      },
    ),
  );
}