0
votes

Iam coding an eCommerce app and from my admin panel app I uploaded product images, name price, and so on to cloud firestore.

looks like this

enter image description here

I want to take this information and make a grid view to show the products in my app. How can i do that..

Please some one help me with exact code.

1

1 Answers

1
votes
void getData()async
{
DocumentSnapshot snapshot= await Firestore.instance.collection('collectionName').document('documentName').get();
var document= snapshot.data;
    String category=document['category'];
    String id=document['id'];
    String name=document['name'];
    int quantity=document['quantity'];
    List<String> images=List.from(document['images']);

}

Now use these variables to show your data.

for gridview of images:-

1.) create grid tiles

List<GridTile> newGridTile=[];
    images.forEach((image) {newGridTile.add(GridTile(
          child: Image.network(image),
    ));});

2,) show this grid

GridView.count(
              crossAxisCount: 3,
              childAspectRatio: 1.0,
              mainAxisSpacing: 1.5,
              crossAxisSpacing: 1.5,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              children: newGridTile,
            ),

and design it further by adding your category and other fields to it.

If you want to get all the items i.e all documents then:-

void getData()async
        {
        QuerySnapshot snapshot=await Firestore.instance.collection('collectionName').getDocuments();
    snapshot.documents.forEach((document){
    category=document['category'];
.
.
.
.
//similarly for all other fields like in the fist code of the answer.
    });
        }