Retrieve array of images from Firestore - flutter - flutter

Question

I am currently trying to retrieve a list of images from Firestore and display them on the screen like this
But I can only retrieve one image from the list. Please help me display all images from Firestore.
How I stream data from Firestore
StreamBuilder<QuerySnapshot>(
stream:
FirebaseFirestore.instance.collection('properties').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return const Text('Fail to load..');
} else if (snapshot.hasData || snapshot.data != null) {
return ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount:
snapshot.data?.docs.length,
itemBuilder: (BuildContext context, int index) {
QueryDocumentSnapshot<Object?>? documentSnapshot =
snapshot.data!.docs[index];
return TestPropertyCard(itemData: documentSnapshot);
});
}
return Container();
},
),
Property Card
class TestPropertyCard extends StatelessWidget {
final dynamic itemData;
const TestPropertyCard({Key? key, required this.itemData}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PropertyDetailPage(
itemData: itemData,
)));
},
child: Container(
height: 200,
margin: const EdgeInsets.only(bottom: 8, left: 5, right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: NayyaaColorTheme.nayyaaBlue),
child: Column(
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10), topRight: Radius.circular(10)),
child: Image.network(
itemData["CoverPhoto"],
height: 130,
width: MediaQuery.of(context).size.width,
fit: BoxFit.fitWidth,
),
),
When user tap on the property card, the app would the user take to the detail page. On this detail page, I would like to display a list of images that is stored in Firestore as array. See my firestore data structure here.
However, my problem is I can only retrieve one image. Here is my code for detail page
class PropertyDetailPage extends StatelessWidget {
final dynamic itemData;
const PropertyDetailPage({Key? key, required this.itemData}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
children: [
Image.network(
itemData['Gallery'][0],
fit: BoxFit.fill,
),
],
),
),
);
}
}
I have tried with ListView.builder(). But I couldn't make it work. Thanks in advance.

Answer 1

Looking into the code you are using, it seems fine. It just lacks the mapping from an image url to image widget.
Replace the children in the ListView as below:
children: (itemData['Gallery'] as List).map((imageUrl){
return Image.network(
imageUrl as String,
fit: BoxFit.fill,
);
}).toList(),
it should work assuming the itemData['Gallery'] is a List<String> stored in the firestore