Flutter and Firestore, Stream builder

[Raju Naga]

Hi,

I am trying to stream some data from firestore to flutter app. Problem that I am facing is that getting the data from firestore in to the Widget that I created. I am trying to follow the mountain stream example in the official firestore plugin git page. But, ofcourse modified to my code and having some trouble in where to store the the snapshot documents map type of data (into which data type).

Below is my code. Error facing at this line:

headImageAssetPath : snapshot.data.documents.map()(['url'],)

Full code as below:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class LostPage extends StatefulWidget {
  @override
  _LostPage createState() => new _LostPage();
}

class _LostPage extends State<LostPage> {

  //temp vars
  final String firebasetest = "Test";

  //firestore vars
  final DocumentReference documentReference =
      Firestore.instance.document("Items/Rusty");


  //CRUD operations
  void _add() {
    Map<String, String> data = <String, String>{
      "name": firebasetest,
      "desc": "Flutter Developer"
    };
    documentReference.setData(data).whenComplete(() {
      print("Document Added");
    }).catchError((e) => print(e));
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
      new StreamBuilder(
        stream: Firestore.instance.collection('Items').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) return new Text('Loading...');
          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: <Widget>[
        Card(
          child: Column(
            // mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    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: <Widget>[
                              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: <Widget>[
                  FlatButton(
                    child: Text(
                      "Add To Cart",
                      style: TextStyle(color: Colors.grey[500]),
                    ),
                    onPressed: () => null,
                  ),
                  Text(
                    "\$5",
                    style: TextStyle(color: Colors.grey[500]),
                  )
                ],
              )
            ],
          ),
        ),
      ],
    );
  

[Larry King]

From the example you mention `Listview.builder` is used:

```

return new ListView.builder(

itemCount: messageCount,

itemBuilder: (_, int index) {

final DocumentSnapshot document = snapshot.data.documents[index];

return new ListTile(

title: new Text(document['message'] ?? '<No message retrieved>'),

subtitle: new Text('Message ${index + 1} of $messageCount'),

       ...
```

I believe your code will have a list of Lost_Card, so maybe you can replace the ListTile with your Lost_Card.

In your code `snapshot.data.documents.map()` is mapping over the data stream from Firestore, so you want to this to sit outside `return LostCard()` somehow.

This `Listview.builder` can be used to accomplish this.

[Raju Naga]

Hmm, I am still not able to quite figure that out.