如何在flutter中显示Firebase中的数据?

时间:2020-08-02 12:00:05

标签: firebase flutter dart firebase-realtime-database

我能够扑朔迷离地从Firebase检索数据,但是我不知道如何在列表中显示它们。另外,我不知道在哪里编写代码,是否必须在init状态方法中编写代码或在其他地方编写代码?

我只能在调试控制台中打印值,而不能在应用程序中打印。请找到以下我用来从Firebase检索数据并将其打印在调试控制台中的代码。这些代码写在initState方法内部的main.dart中。

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

1 个答案:

答案 0 :(得分:0)

您需要一个列表视图构建器或网格视图构建器或任何构建器,具体取决于您想要如何显示数据。

示例:

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

您可以返回一列或其他内容来显示所有数据