How to display the data from firebase in flutter? - firebase

Question

I am able to retrieve data from Firebase in flutter, but I do not know how to display them in my application as a list. Also, I do not know where to write my codes, do I have to write them in init state method or some where else?
I am able only to print the values in the debug console, not in the app. Please find the following codes that I am using to retrieve data from firebase and print them in debug console. These codes are written in the main.dart inside the initState method.
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

You need a list view builder or grid view builder or any builder depending on how you want to show your data.
Example:
return ListView.builder
(itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index) {
return new Text(value['title]);
}
)
You can return a column or something else to display all your data