title: retrieve data from firebase firestore inside of GridView using flutter
body: <p>the problem is that I can not Map data from firestore firebase inside &quot;children&quot; of GridView.count.
  I want to Map a specific document from firebase inside of GridView.count.
  Please Help me.</p>
  <p>productSnap.data.map((document)  please help me how to correct this
  and I am facing this error when I use my code.</p>
  <pre><code>Class '_JsonDocumentSnapshot' has no instance method 'map'.
  Receiver: Instance of '_JsonDocumentSnapshot'
  Tried calling: map(Closure: (dynamic) =&gt; ProductCard)
  </code></pre>
  <p>ProductCard is the name of the widget in this code....
  <a href="https://i.stack.imgur.com/lURdg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lURdg.png" alt="enter image description here" /></a></p>
  <pre><code>                         FutureBuilder(
                                future: _firebaseServices.productsRef
                                    .doc(document.id)
                                    .get(),
                                builder: (context, productSnap) {
                                  if (productSnap.hasError) {
                                    return Container(
                                      child: Center(
                                        child: Text(&quot;${productSnap.error}&quot;),
                                      ),
                                    );
                                  }
  
                                  if (productSnap.connectionState ==
                                      ConnectionState.done) {
           
                                    return GridView.count(
                                        crossAxisCount: 2,
                                        shrinkWrap: true,
                                        physics: NeverScrollableScrollPhysics(),
                                        childAspectRatio: .53,
                                        mainAxisSpacing: 8.0,
                                        crossAxisSpacing: 10,
                                        padding: EdgeInsets.only(
                                            top: 10.0,
                                            bottom: 12.0,
                                            left: 5,
                                            right: 5),
                                        children:
                    /////////////////  the problem is in here  ///////////////
                                            productSnap.data.map((document) {
                               
                                          return ProductCard(
                                            title: document['name'],
                                         );
                                        }).toList());
                                  }
  
                                  return Container(
                                    child: Center(
                                      child: CircularProgressIndicator(),
                                    ),
                                  );
                                });
  </code></pre>