How can I display the data inside the Data row of DATA TABLE WIDGET from firebase --FLUTTER

Question

I am storing data on firebase and then retrieving it using STREAM BUILDER, then I am using the DATA.TABLE widget to display this data but I am not being able to display this data inside the Data row, therefore I am currently using random data. Can anyone please help me with how can I achieve this? Here is my code and snapshots of the project and firebase.

class CaShBookRegister extends StatefulWidget {
  const CaShBookRegister({Key? key}) : super(key: key);

  @override
  _CaShBookRegisterState createState() => _CaShBookRegisterState();
}

class _CaShBookRegisterState extends State<CaShBookRegister> {
  final _firestore = FirebaseFirestore.instance;

  void streamFromFirebase() async {
    await for (var snapshot in _firestore.collection('cashOut').snapshots()) {
      for (var receivedStream in snapshot.docs) {
        print(receivedStream.data());
      }
    }
  }

  DateTime date = DateTime.now();
  late var formattedDate = DateFormat('d-MMM-yy').format(date);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 18.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(
              height: 16.0,
            ),
            Padding(
              padding: const EdgeInsets.all(14.0),
              child: Row(
                children: [
                  Expanded(
                    child: ReuseableCard(
                      textcolour: Colors.white,
                      buttonColour: Colors.green,
                      text: "Cash in hand",
                    ),
                  ),
                  const SizedBox(
                    width: 8.0,
                  ),
                  Expanded(
                    child: ReuseableCard(
                      buttonColour: Colors.red,
                      textcolour: Colors.white,
                      text: "Today's balance",
                    ),
                  ),
                ],
              ),
            ),
            FittedBox(
              child: DataTable(
                columns: const <DataColumn>[
                  DataColumn(
                    label: Text(
                      'Date',
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Amount',
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Optional Detail',
                    ),
                  ),
                ],
                rows: const <DataRow>[
                  DataRow(
                    cells: <DataCell>[
                      DataCell(Text('Random')),
                      DataCell(Text('Random')),
                      DataCell(Text('Random')),
                    ],
                  ),
                ],
              ),
            ),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.all(14.0),
              child: Row(
                children: [
                  Expanded(
                      child: ReusableButton(
                    text: "Cash out",
                  )),
                  const SizedBox(
                    width: 8.0,
                  ),
                  Expanded(
                    child: ReusableButton(
                      text: "Cash in",
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Sorry for my (very) late answer. This is how I will handle this case.

First I will create a StreamBuilder and feed him my Stream _firestore.collection('cashOut').snapshots() .

Then you can check if you received data from your Firebase Firestore.

Once you have this data, you can start processing them and add them to an empty List<DataCell> , then you display your List<DataCells> in the DataRow .

I haven't tried this code, but there shouldn't be a lot of errors.

StreamBuilder<MoneyModel?>(
              stream: _firestore.collection('cashOut').snapshots(),
              builder: (BuildContext context, snapshot) {
                if (snapshot.connectionState == ConnectionState.active) {
                  if (snapshot.hasData) {
                    List<DataCell> displayedDataCell = [];

                    for (var item in snapshot.data!.docs) {
                      displayedDataCell.add(
                        DataCell(
                          Text(
                            item.data()['amount'].toString(),
                          ),
                        ),
                      );
                    }

                    return FittedBox(
                      child: DataTable(
                        columns: const <DataColumn>[
                          DataColumn(
                            label: Text(
                              'Date',
                            ),
                          ),
                          DataColumn(
                            label: Text(
                              'Amount',
                            ),
                          ),
                          DataColumn(
                            label: Text(
                              'Optional Detail',
                            ),
                          ),
                        ],
                        rows: <DataRow>[
                          DataRow(cells: displayedDataCell),
                        ],
                      ),
                    );
                  }
                }
              },
            ),