Flutter Firestore：从 Firestore 中检索数据并在 Flutter 中显示为小部件

Question

我在 Firestore 上有一个名为“orders”的集合，其中包含一个文档列表 我想在我的 Flutter 应用程序中显示为小部件。文档的数据类型为字符串、数字和地图。我正在使用 FutureBuilder 和 ListViewBuilder 来返回一个小部件，

所以我需要将数据从地图转换为我假设的列表？但是我被卡住了......

订单屏幕

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:my_app/widgets/order_item.dart';
import '../providers/orders.dart' show Orders;
import 'package:provider/provider.dart';

class OrdersScreen extends StatefulWidget {
  const OrdersScreen({Key? key}) : super(key: key);
  static const routeName = '/orders-screen';

  @override
  State<OrdersScreen> createState() => _OrdersScreenState();
}

class _OrdersScreenState extends State<OrdersScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text(
          'Order History',
        ),
      ),
      body: FutureBuilder<QuerySnapshot>(
        future: FirebaseFirestore.instance.collection('orders').get(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          } else {
            if (snapshot.error != null) {
              return const Center(
                child: Text('An error has occured'),
              );
            } else {
              final List<DocumentSnapshot> documents = snapshot.data!.docs;
              return ListView.builder(
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) => ????,
                ),
              );
            }
          }
        },
      ),
    );
  }
}

Answer 1

我建议您使用 Stream builder 从 firestore 返回一个小部件， 并像这样使用它；

Stream<QuerySnapshot> _orderStream=  FirebaseFirestore.instance.collection('orders').snapshots();

StreamBuilder<QuerySnapshot>(
                    stream: _orderStream,
                    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (snapshot.hasError) {
                        return const Text(' ');
                      }

                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return const Text(" ");
                      }

                      return Colmn(
                           
                          children: snapshot.data.docs
                              .map((DocumentSnapshot document) {
                            Map<String, dynamic> data =
                                document.data() as Map<String, dynamic>;

                            return  ListView.builder(
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) => 
                  /// whatever widget you want to build, relace it with container
                  
                  Container(child: Text(data['your feild']),), 
                
                      );
                    },
                  ),