扑火的JSON数据到扑扑的ListView

Question

伙计们，我正在开发一个食品订单应用程序，我可以将Firestore中的所有数据作为JSON读取，但是我需要使用该数据来构建列表视图，我只需要将这些数据分开 ITEM BY ITEM < / strong>，您知道我该怎么做吗？谢谢

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

IMGURL = android / assets / images / lunch.jpeg

QUANTITY = 2

PRICE = 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数据

Answer 1

这里有一些关于export default { inject: ['form'] // <-- (7) } 的不错的教程，应该使用：

Tutorial

Flutter.dev reference

Nice tutorial on youtube

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

我希望它将对您有帮助！

Answer 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(),
            );
        }
      },
    );
  })