Retrieve array of images from Firestore - 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