How to display data in real time

Question

I have a payment list that I need to import from a subcollection included in a payments collection and display it in real time. I use the stream to get a real-time change in the display of my data obtained from the firebase. Unfortunately, it didn't work.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:line_icons/line_icons.dart';
import 'package:pharma_smart/common/globals.dart';
import 'package:pharma_smart/common/utils/date_picker.dart';
import 'package:pharma_smart/common/utils/utils.dart';
import 'package:pharma_smart/invoice_management/amount_to_be_paid.dart';
import 'package:pharma_smart/invoice_management/invoice.dart';
import 'package:pharma_smart/invoice_management/invoices_list.dart';

class BillPayment extends StatefulWidget {
  final String invoiceId;
  final List<InvoicePayment> billPayments;
  final int amountInvoice;

  const BillPayment(this.invoiceId, this.amountInvoice,
      {Key? key, required this.billPayments})
      : super(key: key);

  @override
  State<BillPayment> createState() => _BillPaymentState();
}

class _BillPaymentState extends State<BillPayment> {
  TextEditingController amountPaidController = TextEditingController();
  String dropdownValue = '';
  TextEditingController docNumController = TextEditingController();
  TextEditingController cashedDateController = TextEditingController();
  TextEditingController handedDateController = TextEditingController();
  TextEditingController dueDateController = TextEditingController();
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();
  final CollectionReference collection =
     FirebaseFirestore.instance.collection('detailFactue');
 List<InvoicePayment> billPayments = [];
 bool isLoading = false;
 bool toAdd = false;

      void initState() {
        super.initState();
  }

  

  @override
  Widget build(BuildContext context) {
    double _w = MediaQuery.of(context).size.width;
    return Scaffold(
        appBar: AppBar(),
        body: Container(
                child: StreamBuilder<QuerySnapshot>(
                stream: collection
                   .doc(widget.invoiceId)
                    .collection('payments')
                    .snapshots(),
                builder: (context, dataSnapshot) {
                  if (dataSnapshot.connectionState == ConnectionState.waiting) {
                    return const Center(child: CircularProgressIndicator());
                  } else if (dataSnapshot.hasError) {
                    return Center(child: Text('Error loading data'));
                  } else {
                    dataSnapshot.data!.docs.forEach((result) {
                      InvoicePayment billPayment =
                          InvoicePayment.fromDocument(result);
                     billPayments.add(billPayment);
                    });

                    return ListView.builder(
                        itemCount: dataSnapshot.data!.size,
                        itemBuilder: (context, index) {
                          return getPaymentLine(index, context);
                        });
                  }
               })));
  }}