CODEWITHSUNDEEP
flutterdartgoogle-cloud-firestore
Lix
Lix

Reputation: 471

Flutter: How can I get my array data in firestore?

I'm trying to get my data in firestore wherein that data is array and output that data in a card. As of now the output I'm getting is "null". What is the best way to get this array of data? I'm using StreamBuilder<QuerySnapshot> to get the data.

Here is my code:

StreamBuilder<QuerySnapshot>(
                stream: db.collection('ACTIVITIES').snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Column(
                        children: snapshot.data.documents
                            .map((doc) => buildItem(doc))
                            .toList());
                  } else {
                    return SizedBox();
                  }
                })

Here is where I try to output the data:

Card buildItem(DocumentSnapshot doc) {
return Card(
  elevation: 5,
  child: Padding(
    padding: const EdgeInsets.all(8),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Name: ${doc.data['Name_ofUser']}',
          style: TextStyle(fontSize: 20),
        ),
        Text(
          'Description: ${doc.data['Help_Description']}',
          style: TextStyle(fontSize: 20),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FlatButton(
              color: Color(0xFF121A21),
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0),
              ),
              onPressed: () {},
              child: Text(
                'Respond',
                style: TextStyle(color: Colors.white, fontSize: 12),
              ),
            ),
            SizedBox(
              width: 5,
            ),
            FlatButton(
              color: Color(0xFF121A21),
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0),
              ),
              onPressed: () {},
              child: Text(
                'Read',
                style: TextStyle(color: Colors.white, fontSize: 12),
              ),
            )
          ],
        ),
      ],
    ),
  ),
);
}

This is my database structure:

My db link

Upvotes: 0

Views: 593

Answers (1)

Pablo Barrera
Pablo Barrera

Reputation: 10973

Your ACTIVITIES collection, could have any number of documents, where each document could have any number of Issue.

In your case you only have 1 document and it has an array of Issue.

So, if you want to display all the Issue of the first document, you could do something like this:

return Column(
    children: snapshot.data.documents.first['Issue']
       .map<Widget>((issue) => buildItem(issue))
       .toList());

Then buildItem() would receive a Map<String, dynamic>, like this:

Card buildItem(Map issue) {

So now you could access to the map, like this:

issue['Help_Description']

If you want to show all issues from all documents, one below the other, in one single column, you could do something like this:

final issuesLists = snapshot.data.documents
    .map((doc) =>
        doc['Issue'].map<Widget>((issue) => buildItem(issue)).toList())
    .toList();
return Column(children: issuesLists.expand<Widget>((issues) => issues).toList());

Upvotes: 2

Related Questions