如何在flutter中从firebase存储中加载多个图像？答案

【问题标题】：How to load multiple images from firebase storage in flutter?如何在flutter中从firebase存储中加载多个图像？
【发布时间】：2021-04-28 15:45:05
【问题描述】：

这是从 Firebase 存储中获取单个图像到我的 Flutter 应用程序的代码。但我想获取或加载多个图像但我不知道该怎么做。请帮帮我……！！！

import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/cupertino.dart';

import 'dart:async';
import 'dart:io';

class Album extends StatefulWidget {

  static const routeName = '/album';

  @override
  _AlbumState createState() => _AlbumState();
}

class _AlbumState extends State<Album> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    body: Expanded(
             child: ListView.builder(
             itemCount: 2,
              itemBuilder: (ctx, index) => Container(
                  padding: EdgeInsets.all(10),
                    child: Column(
                        children: [
                      FutureBuilder(
                        future: _getImage(context, 'user1/abc.jpg'),
                            builder: (context, snapshot) {
                            if (snapshot.connectionState ==
                              ConnectionState.done) {
                                print('its done');
                                return CircleAvatar(
                                  radius: 60.0,
                                child: snapshot.data,
                              );
                            }

                          if (snapshot.connectionState ==
                            ConnectionState.waiting) {
                              return CircleAvatar(
                                radius: 60.0,
                                child: CircularProgressIndicator(),
                            );
                           }
                            return Container();
                          }
                        ),
                      ],
                    ),
                  ),
                ),
           ),
          ],
        ),
      ),

    );
  }

这是从 firebase 存储中获取单个图像的代码，现在如果我想要多个已经上传到 firebase 存储中的图像该怎么办？

 Future<Widget> _getImage(BuildContext context, String imageName) async {

    Image image;
    await FireStorageService.loadImage(context, imageName).then((value) {
      image = Image.network(
        value.toString(),
        fit: BoxFit.scaleDown,
      );
    });
    return image;
}

我尝试了 listAll() 方法而不是 getDownloadURL() ，但它不起作用

class FireStorageService extends ChangeNotifier {
  FireStorageService();
  static Future<dynamic> loadImage(BuildContext context, String Image) async {
    return await FirebaseStorage.instance.ref().child(Image).getDownloadURL();
  }
}

【问题讨论】：

标签： flutter firebase-storage

【解决方案1】：

To solve this, I recommend that upon uploading any file, store the download URL to a database like Firebase Real-time Database or the new Cloud Firestore. Please see below a simple example of getting the download URL.

storageRef.child("YourFolderName").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
    @Override
    public void onSuccess(Uri uri) {
        // Got the download URL for "YourFolderName/YourFile.pdf"
        // Add it to your database
    }
}).addOnFailureListener(new OnFailureListener() {
    @Override
    public void onFailure(@NonNull Exception exception) {
        // Handle any errors
    }
});
In the end just query the url node from the Firebase Real-time Database or the url collection from Cloud Firestore and use them wherever needed.

【讨论】：

【解决方案2】：

一个好的解决方案是将网址存储在 FireStore 上，这样您就可以查询所需图像的网址并使用构建器绘制图像。

【讨论】：