Flutter: How to merge two StreamBuilder and show the output in a card

Question

I'm kinda stuck with what I'm trying to do. I'm trying to merge my two Stream Builder to show the output as one in a card. In my first StreamBuilder thats where I'm getting some infos of the user like the info that he posted, what they need like that. And in my 2nd StreamBuilder thats where I get his/her name, contacts like that. Is it possible to merge it as one? so I'll get the data as one also.

This is how I use my StreamBuilders.

1st stream:

StreamBuilder<QuerySnapshot>(
  stream: db.collection('HELP REQUEST').where('Type_OfDisaster', isEqualTo: '[Drought]').snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: snapshot.data.documents
          .map((doc) => buildItem(doc))
          .toList()
      );
    } else {
      return Container(
        child: Center(
          child: CircularProgressIndicator()
        )
      );
    }
  }
);

2nd Stream:

StreamBuilder<QuerySnapshot>(
  stream: db.collection('USERS').where('User_ID', isEqualTo: widget.Uid).snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: snapshot.data.documents
          .map((doc) => buildItem(doc))
          .toList()
      );
    } else {
      return Container(
        child: Center(
          child: CircularProgressIndicator()
        )
      );
    }
  }
);

Here is where I output the data I get in the stream builder:

Container buildItem(DocumentSnapshot doc) {
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;
return Container(
  child: Card(
    elevation: 5,
    child: Padding(
      padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  CircleAvatar(
                    radius: 30,
                    backgroundColor: Colors.black,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text('Name: '),
                  Text(
                    '${doc.data['Name_ofUser']}',
                    style: TextStyle(
                        fontSize: 15, fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ],
          ),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    Text('Date:'),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        '${doc.data['Help_DatePosted']}',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontSize: 15, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text('Location:'),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        '${doc.data['Help_Location']}',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 8.0),
                  child: Text('Description:'),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    '${doc.data['Help_Description']}',
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontSize: 20, fontWeight: FontWeight.w500),
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Container(
                  height: _height * 0.05,
                  width: _width * 0.20,
                  child: FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius:
                        BorderRadius.all(Radius.circular(20.0))),
                    color: Color(0xFF121A21),
                    onPressed: () {
                      _viewingRequest(doc.data);
                    },
                    child: Text(
                      'View',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.w800),
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    ),
  ),
 );
}   

Is it possible to do it? Please help me.

Answer 1

You can listen to the snapshots without using a StreamBuilder directly, like this:

List<HelpRequestsPlusUsers> helpRequestsPlusUsers = [];
List<User> allUsers = [];
List<HelpRequest> helpRequests = [];

@override
void initState() {
  db.collection('USERS').where('User_ID', isEqualTo: widget.Uid).snapshots().listen((snapshot){
    allusers = snapshot.data.documents;
    mergeUsersWithHelpRequests();
  });
  db.collection('HELP REQUEST').where('Type_OfDisaster', isEqualTo: '[Drought]').snapshots().listen((snapshot){
    helpRequests = snapshot.data.documents;
    mergeUsersWithHelpRequests();
  });
  super.initState();
}

void mergeUsersWithHelpRequests(){
  // Run the code to merge your allUsers and helpRequests data into a helpRequestsPlusUsers List
}

Widget

 Widget _buildHelpRequestsPlusUsersWidget (){
   if (helpRequestsPlusUsers.isNotEmpty) {
     return ListView.builder(
       itemBuilder: (context, index){
         return buildItem(helpRequestsPlusUsers[index]);
       }
     );
   } else {
     return Container(
       child: Center(
         child: CircularProgressIndicator()
       )
     );
   }
 }