Asynchronous await with for loops in flutter

Question

I am attempting to query data from firestore(1), i would then loop through all the results(2) and use a field to query the firebase storage bucket to get image url links(3) and then use that result to generate a list of widgets(4) which i would then display. However I don't seem to be able to perform all this tasks synchronously. The part where i attempt to query the firebase storage bucket for the image url links seems to ALWAYS return a result last. I have tried using aync/await and Future.foreach all to no avail.Below is the code.

Future getCollections(BuildContext context) async {
    collectionsList = await collectionsUtil.getCollections();
    for (var element in collectionsList) {
      element.images = await collectionsUtil.getImagesDownloadurl(element);
    }

    imageSliders = collectionsList
        .map(
          (element) => ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: CachedNetworkImage(
              imageUrl: element.images[0],
              placeholder: (context, url) =>
                  Center(child: CircularProgressIndicator()),
              errorWidget: (context, url, error) => Icon(Icons.error),
              fit: BoxFit.cover,
            ),
          ),
        )
        .toList();

    loading = false;
    setState(() {});
    return imageSliders;
  } 

The getimagesDownloadUrl function is below

Future<List<String>> getImagesDownloadurl(
      Collections collectionElement) async {
    List<String> images = [];
    storageRef.child(collectionElement.name).listAll().then((result) {
      result.items.forEach((element) async {
        var link = await element.getDownloadURL();

        images.add(link);
        
        print(link);
      });
    });
    return images;
  }

Can i please get some help?