Firestore json数据到带有颤动的列表视图答案

【问题标题】：Firestore json data to listview with flutterFirestore json数据到带有颤动的列表视图
【发布时间】：2020-07-21 14:39:00
【问题描述】：

伙计们，我正在开发一个食品订单应用程序，我可以将 Firestore 中的所有数据作为 JSON 读取，但我需要使用该数据构建一个列表视图，我只需将这些数据分开 ITEM BY ITEM 你知道我怎样才能以最短的方式做到这一点吗？谢谢

喜欢这个 listview 第一个图块
项目名称 = iTEM1

IMGURL = android/assets/images/lunch.jpeg

数量 = 2

价格 = 10

`import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:resat/BurgerListView/data/food_,model.dart';

 class cart_page extends StatelessWidget {
 FoodItem foodItem;


    @override
   Widget build(BuildContext context) {
      return Scaffold(
       body: new GestureDetector(
          child: Text('asd'),
         onTap: () async {
             var docs = await Firestore.instance
            .collection('cart')
          .document('LIihBLtbfuJ8Dy640DPd')
          .get()
          .then((DocumentReference) => DocumentReference.data);

      print(docs);
    },
  ),
);
 }
}

` 这是我的火库

这是我打印的文档，是从Firestore 打印的 JSON 数据

【问题讨论】：

你试过 Listview.Builder 吗？检查link也许对你有帮助。此外，您可以在颤振中使用 JSON Serialization 将您的 Firestore 响应映射到模型。

标签： json flutter google-cloud-firestore

【解决方案1】：

这里有一些关于Listview.builder 的不错的教程，应该使用：

Tutorial

Flutter.dev reference

Nice tutorial on youtube

我认为你应该从中弄清楚。

希望对你有帮助！

【讨论】：

【解决方案2】：

例如

  body: Builder(builder: (context){
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('cart').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError)
          return Center(
            child: Text('Error: ${snapshot.error}'),
          );
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(
              child: Text('Loading...'),
            );
          default:
            return new ListView(
              children: snapshot.data.documents.map((
                  DocumentSnapshot document) {
                return  ListTile(
                  title: Text(document['asd']),

                );
              }).toList(),
            );
        }
      },
    );
  })

【讨论】：