如何在flutter中从firebase存储加载多个图像?

时间:2021-01-24 18:45:04

标签: flutter firebase-storage

这是从 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();
  }
}

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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.