如何在flutter中顯示firebase的數據？

Question

我能夠從 flutter 中的 Firebase 檢索數據，但我不知道如何在我的應用程序中將它們顯示為列表。 另外，我不知道在哪里寫我的代碼，我是否必須在 init state 方法或其他地方寫它們？

我只能在調試控制台中打印值，而不能在應用程序中打印。 請找到我用來從 firebase 檢索數據的以下代碼，並在調試控制台中打印它們。 這些代碼寫在main.dart的initState方法里面。

final retrieve = FirebaseDatabase.instance.reference().child("Transaction");
  String _titleController;
  String _amountController;
  String _selectedDate;
  String _selectedpicker;

  @override
  void initState() {
    retrieve.once().then(
      (DataSnapshot snapshot) {
        Map<dynamic, dynamic> values = snapshot.value;

        //for loop
        values.forEach(
          (key, value) {
            print("OOoooooo");
            print(value['title']);
            final strem =
                    Firestore.instance.collection('Transaction').snapshots(),
                _titleController = value['title'];
            _amountController = value['amount'];
            _selectedDate = value['Picker'];
            _selectedpicker = value['Date'];

            return StreamBuilder(
                stream: stream,
                builder: (context, snapshot) {
                  if (!snapshot.hasData) {
                    return Text("Loading");
                  } else {
                    return ListView.builder(
                        itemCount: snapshot.data.documents.length,
                        itemBuilder: (context, index) {
                          DocumentSnapshot mytransaction =
                              snapshot.data.documents[index];
                          return Card(
                              elevation: 5,
                              margin: EdgeInsets.symmetric(
                                  vertical: 8, horizontal: 5),
                              child: ListTile(
                                leading: CircleAvatar(
                                  backgroundColor: Colors.purple,
                                  radius: 30,
                                  child: Padding(
                                    padding: EdgeInsets.all(6),
                                    child: FittedBox(
                                      child: Text(
                                        '\$${mytransaction['amount']}',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontFamily: 'FjallaOne'),
                                      ),
                                    ),
                                  ),
                                ),
                                title: Text(
                                  '${mytransaction['title']}' +
                                      " " +
                                      '${mytransaction['Picker']}',
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontFamily: 'FjallaOne'),
                                ),
                                subtitle: Text(
                                  '${mytransaction['Date']}',
                                ),
                              ));
                        });
                  }
                });
          },
        );
      },
    );
  }

Answer 1

您需要列表視圖構建器或網格視圖構建器或任何構建器，具體取決於您希望如何顯示數據。

例子：

return ListView.builder
    (itemCount: litems.length,
     itemBuilder: (BuildContext ctxt, int index) {
         return new Text(value['title]);
     }
    )

您可以返回一列或其他內容來顯示所有數據