如何从 firebase --FLUTTER 的 DATA TABLE WIDGET 的 Data 行中显示数据答案

【问题标题】：How can I display the data inside the Data row of DATA TABLE WIDGET from firebase --FLUTTER如何从 firebase --FLUTTER 的 DATA TABLE WIDGET 的 Data 行中显示数据
【发布时间】：2022-02-18 20:48:44
【问题描述】：

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

【问题讨论】：

你的流生成器在哪里？
在最上面有一个名为 (streamFromFirebase) 的函数，我通过它在终端中获取输出，但不知道如何在数据表中显示它
我明白了，那么您使用的是 Stream，但它不是 StreamBuilder。我会在几分钟内创建一个答案，完成一些事情
谢谢，这会很有帮助

标签： firebase flutter firebase-realtime-database datatable widget

【解决方案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),
                        ],
                      ),
                    );
                  }
                }
              },
            ),

【讨论】：