使用flutter从firebase中的子集合中读取或检索数据列表

Question

我使用 firebase 来保存我的数据并使用 flutter (dart) 来访问这些数据 现在。我的收藏有名称 (Customer_payment_details) 我放了这样的随机唯一 ID (tZ9d9cYeUvXKm1easHtr)，在这个 ID 中我有子收藏 (Payment_info)。在这个子集合中有一个唯一的 ID。并且在这个 id 中有很多值。

我想将这些数据读取为 List

我编写这段代码来访问这些数据

此代码 Belo 是我的模型名称 (Customer_payment_details)

class Customer_payment_details {
  String customer_id;
  String payment_date;
  String stay_balance;
  String amount_balance;
  String customer_note;
  String dept_now;
  String id;
  Customer_payment_details({ this.id ,this.customer_id, this.payment_date, this.stay_balance , 
  this.customer_note , this.amount_balance , this.dept_now });

   Customer_payment_details.fromMap_details(Map snapshot,String id) :
   id = id ?? '',
    customer_id = snapshot['customer_id'] ?? '',
    payment_date = snapshot['payment_date'] ?? '',
    stay_balance = snapshot['stay_balance'] ?? '',
    amount_balance =snapshot["amount_balance"] ?? '',
    customer_note = snapshot['customer_note'],
    dept_now = snapshot['dept_now'];

  toJson() {
   return {
  "customer_id" : customer_id,

  "payment_date": payment_date,
 "stay_balance" : stay_balance,
  "amount_balance" : amount_balance,

  "customer_note" : customer_note,
  "dept_now" : dept_now,
};
}
}

这是我的 API：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';

class payment_api {
 final Firestore _db = Firestore.instance;
 final String path;
 CollectionReference ref;

 payment_api(this.path) {
   ref = _db.collection(path);
  }

  Future<QuerySnapshot> getDataCollection() {
   return ref.getDocuments();
  }

  Stream<QuerySnapshot> streamDataCollection() {
    return ref.snapshots();
  }

  Future<DocumentSnapshot> getDocumentById(String id) {
   return ref.document(id).get();
  }

  Future<void> removeDocument(String id) {
    return ref.document(id).delete();
  }

   Future<DocumentReference> addDocument(Map data, String customer_id) {
    return ref.document(customer_id).collection("Payment_info").add(data);
   }

   Future<void> updateDocument(Map data, String id) {
    return ref.document(id).updateData(data);
  }
 }

这是我的屏幕：

import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import 'package:login_example/CustomerCore/models/cstomer_payment_detailsModel.dart';
 import 'package:login_example/CustomerCore/models/productModel.dart';
 import 'package:login_example/CustomerCore/viewmodels/CRUDModel.dart';
 import 'package:login_example/CustomerCore/viewmodels/customer_paymentCRUD.dart';
 import 'package:login_example/uiCustomer/widgets/payment_details_card.dart';
 import 'package:login_example/uiCustomer/widgets/productCard.dart';
 import 'package:provider/provider.dart';

 class payment_details_view extends StatefulWidget {
   @override
   _payment_details_viewState createState() => _payment_details_viewState();
 }

 class _payment_details_viewState extends State<payment_details_view> {
   List<Customer_payment_details> customers_information;

  @override
   Widget build(BuildContext context) {
    final productProvider = Provider.of<customer_paymentCRUD>(context);

   return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.deepPurple,
    title: Center(child: Text('ايوب محمد ابراهيم')),
  ),
  body: Container(
    child: StreamBuilder(
        stream:   productProvider.fetchcustomer_paymentsAsStream(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasData) {
            customers_information = snapshot.data.documents
                .map((doc) => Customer_payment_details.fromMap_details(doc.data, 
           doc.documentID)).toList();
            return ListView.builder(
              itemCount: customers_information.length,
              itemBuilder: (buildContext, index) => payment_details_card(
                  customer_details: customers_information[index]),
            );

这是我的名片：

class payment_details_card 扩展 StatelessWidget { 最终 Customer_payment_details customer_details;

MoneyFormatterOutput fmf;
String convert_value (String value){
fmf = FlutterMoneyFormatter(
    amount: double.parse(value),
    settings: MoneyFormatterSettings(
        symbol: 'د.ع',
        thousandSeparator: ',',
        decimalSeparator: '.',
        symbolAndNumberSeparator: ' ',
        fractionDigits: 0,
        compactFormatType: CompactFormatType.short
    )
).output;
return fmf.symbolOnLeft;
 }
 payment_details_card({@required this.customer_details});


  @override
  Widget build(BuildContext context) {
return GestureDetector(
  onTap: (){
  //  Navigator.push(context, MaterialPageRoute(builder: (_) => CustomerProfilePage(customer_info: 
 customer_details)));
    print(customer_details.id);
  },
  child: Padding(
    padding: EdgeInsets.all(8),
    child: Card(
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        height: MediaQuery
            .of(context)
            .size
            .height * 0.30,
        width: MediaQuery
            .of(context)
            .size
            .width * 0.9,
        child: Column(
          children: <Widget>[
            Hero(
                tag: customer_details.customer_id,

                child :   Material(
                  color: Colors.white70,
                  child: Column(

                    crossAxisAlignment: CrossAxisAlignment.center,

                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(right: 10.0 , top: 15.0),
                        child:   Text(

                          //اسم الزبون
                          customer_details.customer_id,

                          textDirection: TextDirection.rtl,

                          style: TextStyle(
                            fontFamily: 'JannaLT-Regular',
                            fontWeight: FontWeight.w900,
                            fontSize: 22,
                            color:  Colors.black,


                          ),
                        ),
                      ),

等等……

下图显示了数据库：

还有这张图片作为子收藏

我想将此数据作为列表视图加载到卡片中。有人可以帮忙吗？

Answer 1

检查此代码。

       stream:   productProvider.fetchcustomer_paymentsAsStream(),
       builder: (context,snapshot) {
         if (snapshot.hasData) {
            List<Customer_payment_details> customers_information= snapshot.data;

           return ListView.builder(
             itemCount: customers_information.length,
             itemBuilder: (context, index){

               return YourCardClass(
                               customers_information: customers_information[index]);

}