如何在 firebase --FLUTTER 的 DATA.TABLE WIDGET 的数据行中显示数据

Question

我将数据存储在 firebase 上，然后使用 STREAM BUILDER 检索它，然后我使用 DATA.TABLE 小部件来显示此数据，但我无法在数据行中显示此数据，因此我目前使用的是随机数据。 谁能帮我解决这个问题？ 这是我的代码和项目的快照和 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

抱歉我（非常）迟到的回答。 这就是我处理这个案子的方式。

首先，我将创建一个 StreamBuilder 并将我的 Stream _firestore.collection('cashOut').snapshots()喂给他。

然后您可以检查是否从 Firebase Firestore 收到数据。

一旦你有了这些数据，你就可以开始处理它们并将它们添加到一个空的List<DataCell>中，然后你在DataRow中显示你的List<DataCells> 。

我没有试过这段代码，但应该不会有太多错误。

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