Flutter Firebase：如何显示存储中的多个图像？

Question

我有这个功能：

   Future<void> listImages(String childcode) async {
    firebase_storage.ListResult result =
    await firebase_storage.FirebaseStorage.instance.ref('/images/$childcode').listAll();
    result.items.forEach((firebase_storage.Reference ref) {
      String bilderName = ref.name;
      print('Files: $ref');
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: const Text(
            "Images",
          ),
          content: Row(
            children: [
              Container(
                height: 200,
                width: 200,
                child: ImageViewer(childcode: childcode, fileName: bilderName),
              ),
            ],
          ),
          actions: [
            // Cancel Button
            TextButton(
              child: const Text("Close",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      );
    });
  }

它可以工作并显示 firestore 存储中“/images/$childcode”中的所有图像。 但它为每个图像打开一个“对话框”，这是我知道显示图像的唯一方法。 那么，我如何在 UI 中像画廊一样显示它们？

我尝试从图像 (bilderName) 或 URL 中获取名称，但无法返回它们/不知道如何在函数之外获取它们.. tahnks！

图像查看器：

FutureBuilder(
            future: storage.downloadURL('$childcode/$fileName'),
            builder: (BuildContext context,
                AsyncSnapshot<String> snapshot) {
              if (snapshot.connectionState == ConnectionState.done &&
                  snapshot.hasData){

                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 100,
                    height: 100,
                    child: Image.network(
                      snapshot.data!,
                      fit: BoxFit.cover,
                    ),
                  ),
                );

              }
              if (snapshot.connectionState == ConnectionState.waiting || !snapshot.hasData) {
                return CircularProgressIndicator();
              }
              return Container();
            }
        ),

Answer 1

通过示例尝试

GridView

：

Future<List<String>> getImagePath(String childcode) async {
  ListResult result =
      await FirebaseStorage.instance.ref('/images/$childcode').listAll();
  return await Future.wait(
    result.items.map((e) async => await e.getDownloadURL()),
  );
}

Widget buildGallery() {
  return FutureBuilder(
    future: getImagePath('childcode'),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting ||
          !snapshot.hasData) {
        return const CircularProgressIndicator();
      }
      return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 1,
          mainAxisExtent: 10,
          mainAxisSpacing: 10,
        ),
        itemBuilder: (context, index) => Image.network(
          snapshot.data![index],
          fit: BoxFit.fill,
          loadingBuilder: (BuildContext context, Widget child,
              ImageChunkEvent? loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes!
                    : null,
              ),
            );
          },
        ),
      );
    },
  );
}