Как отобразить данные из firebase во флаттере?

Question

Я могу извлекать данные из Firebase во флаттере, но я не знаю, как отобразить их в моем приложении в виде списка. Кроме того, я не знаю, куда писать свои коды, мне нужно писать их в методе состояния инициализации или где-то еще?

Я могу распечатать значения только в консоли отладки, а не в приложении . Найдите следующие коды, которые я использую для получения данных из 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]);
     }
    )

Вы можете вернуть столбец или что-то в этом роде еще для отображения всех ваших данных