Retrieve array of images from Firestore

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.

CodePudding user response：

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