title: Stream builder from firestore to flutter
body: <p>I am wondering how to get data from firestore to flutter app using the streambuilder. I created the necessary Boilerplate code I have the widget built and working and in the below code 
  <code>headimageassetpath</code> is nothing but a URL string which exists in the firestore.</p>
  
  <pre><code> @override
    Widget build(BuildContext context) {
      return Scaffold(
        body:
        new StreamBuilder(
          stream: Firestore.instance.collection('Items').snapshots(),
          builder: (_, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
            var items = snapshot.data?.documents ?? [];
            return new Lost_Card(
              headImageAssetPath : snapshot.data.documents.map()(['url'],)   
  
            );
          },
        )
  </code></pre>
  
  <p>My firestore:
  <a href="https://i.stack.imgur.com/uNc3I.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uNc3I.png" alt="enter image description here"></a></p>
  
  <p>full code:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:cloud_firestore/cloud_firestore.dart';
  class LostPage extends StatefulWidget {
    @override
    _LostPage createState() =&gt; new _LostPage();
  }
  
  class _LostPage extends State&lt;LostPage&gt; {
  
    //temp vars
    final String firebasetest = "Test";
  
    //firestore vars
    final DocumentReference documentReference =
        Firestore.instance.document("Items/Rusty");
  
  
    //CRUD operations
    void _add() {
      Map&lt;String, String&gt; data = &lt;String, String&gt;{
        "name": firebasetest,
        "desc": "Flutter Developer"
      };
      documentReference.setData(data).whenComplete(() {
        print("Document Added");
      }).catchError((e) =&gt; print(e));
    }
  
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body:
        new StreamBuilder(
          stream: Firestore.instance.collection('Items').snapshots(),
          builder: (_, AsyncSnapshot&lt;QuerySnapshot&gt; snapshot) {
            var items = snapshot.data?.documents ?? [];
  
  
            return new Lost_Card(
              headImageAssetPath : snapshot.data.documents.map()(['url'],)
  
  
            );
          },
        )
  
        /*new Lost_Card(
          headImageAssetPath: "https://i.imgur.com/FtaGNck.jpg" ,
          title: "Mega Dish",
          noro: "old",
  
  
        )*/,
        floatingActionButton: new FloatingActionButton(
            child: new Icon(Icons.add),
            onPressed: _add),
      );
    }
  }
  
  class Lost_Card extends StatelessWidget
  {
  
    //All the card variables
    final String headImageAssetPath;
    final IconData icon;
    final Color iconBackgroundColor;
    final String title;
    final String noro;
    final int price;
    final ShapeBorder shape;
  
    Lost_Card({
  
      this.headImageAssetPath,  //used
      this.icon,
      this.iconBackgroundColor,
      this.title, //used
      this.noro,  //used
      this.price,
  
    });
  
  
  
    @override
    Widget build(BuildContext context) {
  
  
  
  
  
      // TODO: implement build
     return GridView.count(
        shrinkWrap: true,
        crossAxisCount: 2,
        children: &lt;Widget&gt;[
          Card(
            child: Column(
              // mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: &lt;Widget&gt;[
                Expanded(
                  child: Stack(
                    fit: StackFit.expand,
                    children: &lt;Widget&gt;[
                      Container(
                        height: MediaQuery.of(context).size.height / 4,
                        width: MediaQuery.of(context).size.height / 2.5,
  
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: NetworkImage(
                                    headImageAssetPath),
                                fit: BoxFit.cover),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Align(
                          alignment: FractionalOffset.topLeft,
                          child: CircleAvatar(
                            backgroundColor: Colors.redAccent,
                            radius: 15.0,
                            child: Text(
                              noro,
                              textScaleFactor: 0.5,
                            ),
                          ),
                        ),
                      ),
                      Align(
                        alignment: FractionalOffset.topRight,
                        child: Container(
                          color: Colors.blueAccent,
                          height: 35.0,
                          width: 35.0,
                          child: Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: &lt;Widget&gt;[
                                Icon(Icons.account_circle),
                                Text(
                                  "1P",
                                  textScaleFactor: 0.5,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Center(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    alignment: FractionalOffset.bottomCenter,
                    child: Text(
                      title,
                      style: TextStyle(
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: &lt;Widget&gt;[
                    FlatButton(
                      child: Text(
                        "Add To Cart",
                        style: TextStyle(color: Colors.grey[500]),
                      ),
                      onPressed: () =&gt; null,
                    ),
                    Text(
                      "\$5",
                      style: TextStyle(color: Colors.grey[500]),
                    )
                  ],
                )
              ],
            ),
          ),
        ],
      );
    }
  
  }
  </code></pre>
  
  <p>Actual App
  <a href="https://i.stack.imgur.com/gQgwv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gQgwv.png" alt="enter image description here"></a>
  Please shed some light on this. Tks.</p>