title: How to query firestore document inside streambuilder and update the listview
body: <p>I'm trying to retrieve posts from a Firestore collection called "posts", which contains the <strong>post creator's userID</strong> and post description and this is possible by using both StreamBuilder and FutureBuilder(Not preferable, because it gets a snapshot only once and doesn't update when a field changes). </p>
  
  <p>However, I want to query another collection called "users" with the <strong>post creator's userID</strong> and retrieve the document that matches the userId.</p>
  
  <p>This was my first approach: </p>
  
  <pre><code>StreamBuilder&lt;QuerySnapshot&gt;(
    stream:Firestore.instance.collection("posts").snapshots(),
    builder: (BuildContext context, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
      if (!snapshot.hasData) {
        return Center(
          child: _showProgressBar,
        );
      }
  
     List&lt;DocumentSnapshot&gt; reversedDocuments = snapshot.data.documents.reversed.toList();
      return ListView.builder(
        itemCount: reversedDocuments.length,
        itemBuilder: (BuildContext context, int index){
  
          String postAuthorID = reversedDocuments[index].data["postAuthorID"].toString();
          String postAuthorName = '';
          Firestore.instance.collection("users")
          .where("userID", isEqualTo: postAuthorID).snapshots().listen((dataSnapshot) {
              print(postAuthorName = dataSnapshot.documents[0].data["username"]);
            setState(() {
              postAuthorName = dataSnapshot.documents[0].data["username"];                  
            });
          });
  
          String desc = reversedDocuments[index].data["post_desc"].toString();
  
          return new ListTile(
            title: Container(
              child: Row(
                children: &lt;Widget&gt;[
                  Expanded(
                    child: Card(
                      child: new Column(
                        children: &lt;Widget&gt;[
                          ListTile(
                            title: Text(postAuthorName, //Here, the value is not changed, it holds empty space.
                              style: TextStyle(
                                fontSize: 20.0,
                              ),
                            ),
                            subtitle: Text(desc),
                          ),
                         )
  </code></pre>
  
  <p>After understanding that ListView.builder() can only render items based on the DocumentSnapshot list and can't handle queries inside the builder. </p>
  
  <p><strong>After many research:</strong> 
  I tried many alternatives like, trying to build the list in the initState(), tried using the Nested Stream Builder:</p>
  
  <pre><code>return StreamBuilder&lt;QuerySnapshot&gt;(
    stream: Firestore.instance.collection('posts').snapshots(),
    builder: (context, snapshot1){
      return StreamBuilder&lt;QuerySnapshot&gt;(
        stream: Firestore.instance.collection("users").snapshots(),
        builder: (context, snapshot2){
          return ListView.builder(
            itemCount: snapshot1.data.documents.length,
            itemBuilder: (context, index){
              String desc = snapshot1.data.documents[index].data['post_description'].toString();
              String taskAuthorID = snapshot1.data.documents[index].data['post_authorID'].toString();
              var usersMap = snapshot2.data.documents.asMap();
              String authorName;
              username.forEach((len, snap){
                print("Position: $len, Data: ${snap.data["username"]}");
                if(snap.documentID == post_AuthorID){
                  authorName = snap.data["username"].toString();
                }
              });
              return ListTile(
                title: Text(desc),
                subtitle: Text(authorName), //Crashes here...
              );
            },
          );
        }
      );
    }
  );
  </code></pre>
  
  <p>Tried with Stream Group and couldn't figure out a way to get this done, since it just combines two streams, but I want the second stream to be fetched by a value from first stream. </p>
  
  <p>This is my Firebase Collection screenshot:</p>
  
  <p>Firestore "posts" collection:
  <a href="https://i.stack.imgur.com/7fEx3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7fEx3.png" alt="Firestore &quot;posts&quot; Collection"></a></p>
  
  <p>Firestore "users" collection: 
  <a href="https://i.stack.imgur.com/h8zT2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/h8zT2.png" alt="Firestore &quot;users&quot; collection"></a></p>
  
  <p>I know this is a very simple thing, but still couldn't find any tutorial or articles to achieve this.</p>