flutter firebase database and ListView builder issue - firebase

Question

I suppose to show each item of my shopList in ListView, but I can't find out the reason why it keep showing the same record. Please help to solve this issue.
Here with the code, get data from firebase database.
databaseReference.once().then((DataSnapshot snapshot) {
Map<dynamic, dynamic> getMap = snapshot.value;
getMap.forEach((k, v) {
Map<dynamic, dynamic> f = v;
shop.key = k;
shop.shopName = f["ShopName"];
shop.tel = f["ShopTel"];
shop.address = f["ShopAddress"];
shop.thumbnail = f["Thumbnail"];
debugPrint(k);
shopList.add(shop);
debugPrint(shopList[shopList.length-1].shopName);
});
});
DebugPrint result:
flutter: -LLySYDHHHx9WtCvKPrO
flutter: shop1111
flutter: -LLyXwR0nnAcx6_H4cYy
flutter: shop2222
Here with the database:
Here with the code for ListView:
child: Flexible(
child: new ListView.builder(
itemCount: shopList.length,
itemBuilder: (context, index) {
return new Card(
color: Colors.red,
//elevation: 2.0,
child: new ListTile(
title: new Text("Name: ${shopList[index].key}"),
),
);
}),
),
the result of simulator:

Answer 1

Try this.
That's what I would do
Shop.dart
class Shop {
String key;
String name;
String address;
String phone;
String thumbnail;
Shop(this.name,this.address,this.phone,this.thumbnail);
Shop.fromSnapshot(DataSnapshot snapshot)
: key = snapshot.key,
name = snapshot.value["name"],
address= snapshot.value["address"],
phone= snapshot.value["phone"],
thumbnail= snapshot.value["thumbnail"];
toJson() {
return {
"name": name,
"address": address,
"phone": phone,
"thumbnail": thumbnail,
};
}
}
main.dart
List<Shop> itemsShop = List();
Shop itemShop;
DatabaseReference itemRefShop;
#override
void initState() {
super.initState();
itemShop = Shop("", "", "", "");
final FirebaseDatabase database = FirebaseDatabase.instance;
itemRefShop = database.reference().child('Shop');
itemRefShop.onChildAdded.listen(_onEntryAddedShop);
itemRefShop.onChildChanged.listen(_onEntryChangedShop);
}
_onEntryAddedShop(Event event) {
setState(() {
itemsShop.add(Shop.fromSnapshot(event.snapshot));
});
}
_onEntryChangedShop(Event event) {
var old = itemsShop.singleWhere((entry) {
return entry.key == event.snapshot.key;
});
setState(() {
itemsShop[Shop.indexOf(old)] = Shop.fromSnapshot(event.snapshot);
});
}
#override
Widget build(BuildContext context) {
return new Container(
child: new Column(
children: <Widget>[
new Flexible(
child: new FirebaseAnimatedList(
query: itemRefShop,
itemBuilder:(_, DataSnapshot snapshot, Animation<double> animation, int index){
return new ListTile(
title: new Text(snapshot.value['name']),
subtitle: new Text(itemsShop[index].address),
);
}
),
]
),
);
}
}