How to View Firebase Real Time Database Value from ListView in Flutter
Today I’m going to show you example for view firebase data in Flutter Listview
1. Connect Your Project with firebase
I assume that you have already know to connect the application with firebase. if not just search in youtube and come to next part.
2: Adding Dependencies
You should add the dependency in pubspec.yaml file for working with firebase.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
firebase_core: ^0.4.0+6
firebase_database: ^3.0.4
intl: ^0.15.8
3. Create Db Reference
final ref= FirebaseDatabase.instance.reference().child(“OrderHistory”);
4. Create Db Model
Now we have to create database model to store reading value from firebase. and this model use to create object of an model for store reading data.
Create new dart file as OrderHistoryModel.dart
class OrderHistoryModel
{
String name;
String picture;
String price;
String quantity;
String date;
OrderHistoryModel({
this.name,
this.picture,
this.price,
this.quantity,
this.date,
});
}
5. Create List using Created Db Model
This list use to store collections objects of a db model
List<OrderHistoryModel> Products_on_the_order_history=List();
6. Read data from the firebase
you can add new function with this code and call it from initstate()
try{
await ref.once().then((DataSnapshot snapshot) {
var data = snapshot.value;
Products_on_the_order_history.clear();
data.forEach((key,value)
{
OrderHistoryModel model = new OrderHistoryModel(
name: value[“ptitle”],
picture: value[“img”],
price: value[“price”],
quantity: value[“qty”],
date: value[“date”],
);
setState(() {
Products_on_the_order_history.add(model);
});
print(model.name);
print(model.picture);
}
);
});
}
catch(e)
{
print(e);
}
7 Use widget to return single item from the list
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: Products_on_the_order_history.length,
itemBuilder: (context, index){
return Single_order_history_product(
order_history_product_name: Products_on_the_order_history[index].name,
order_history_prod_picture: Products_on_the_order_history[index].picture,
order_history_prod_price: Products_on_the_order_history[index].price,
order_history_prod_qty: Products_on_the_order_history[index].quantity,
order_history_product_date: Products_on_the_order_history[index].date,
);
});
}
8 Create class to Build List of items one by one
class Single_order_history_product extends StatelessWidget {
final order_history_product_name;
final order_history_prod_picture;
final order_history_prod_price;
final order_history_prod_qty;
final order_history_product_date;
Single_order_history_product({
this.order_history_product_name,
this.order_history_prod_picture,
this.order_history_prod_price,
this.order_history_prod_qty,
this.order_history_product_date,
});
@override
Widget build(BuildContext context) {
String PImg = order_history_prod_picture;
print(“PImg”);
print(PImg);
return Card(
child: ListTile(
//=============== LEADING SECTION ===============================
leading: FadeInImage.assetNetwork(
placeholder: ‘assets/open_box.png’,
image:PImg,
height: 80.0,
width: 80.0,
fit: BoxFit.contain,
),
// =========== TITLE SECTION ==============================
title: new Text(order_history_product_name),
////end of title===========================================
// ========== SUBTITLE SECTION ==================================
subtitle: new Column(
children:<Widget> [
//======for product price==========================
new Row(
children: [
// =============this section is for the Product price =========================
Padding(
padding: const EdgeInsets.only(top:5.0),
child: new Text(“\Rs.${order_history_prod_price}”,style: TextStyle(color: Colors.black87),),
),
//end of product price=================================
],
),
//end of price container ==================================
//Row inside the column
new Row(
children: <Widget> [
//==========this section is for the qty of the product=========
Padding(
padding: const EdgeInsets.all(0.0),
child: new Text(“Qty :”),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: new Text(order_history_prod_qty,style: TextStyle(color: Colors.orangeAccent),),
),
//end of qty of the product
//==============this section is for oder received date ==========================
new Padding(padding: const EdgeInsets.fromLTRB(15.0, 8.0, 8.0,8.0),
child: new Text(“Date :”),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: new Text(order_history_product_date,style: TextStyle(color: Colors.orangeAccent)),
),
//=======================end of received date
],
),
],
),
//========================================================================
),
);
}
}
