Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
544 views
in Technique[技术] by (71.8m points)

firebase - How to get all the elements from cloud firestore Flutter

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.

question from:https://stackoverflow.com/questions/66058342/how-to-get-all-the-elements-from-cloud-firestore-flutter

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
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.
    });
        }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...