从 Firebase 存储中获取所有图像

【问题标题】：Getting All Images from Firebase Storage从 Firebase 存储中获取所有图像
【发布时间】：2021-04-05 03:27:12
【问题描述】：

我想获取我所有的 Firebase 存储图像并显示它们。我确实在这里使用了 ...ref().child("").listAll() 方法，并且可以获取存储中的图像路径打印它们但不知道如何显示它们。请尽快帮助我，因为我的 Firebase 测试持续时间将在明天结束。

我的作品有一个重要更新，所以我对其进行了编辑。我可以一一获取所有存储图像的downloadUrl，但无法在屏幕上列出它们。

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

class StorageAlbumDisplay extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return StorageAlbumDisplayState();
  }
}

class StorageAlbumDisplayState extends State<StorageAlbumDisplay> {
  String _text;

  @override
  void initState() {
    super.initState();
    getImages();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ALBUM DİSPLAY PAGE"),
      ),
      body: Container(
        child: Column(
          children: [
            RaisedButton(
                child: Text("Get Images"),
                onPressed: () {
                  getImages();
                }),
            Flexible(
              child: GridView.builder(
                  shrinkWrap: true,
                  itemCount: 10,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2),
                  itemBuilder: (context, index) {
                    return GridTile(
                      child: Center(child: Text(_text),),
                    );
                  }),
            ),
          ],
        ),
      ),
    );
  }

   void getImages() async {
    final firebase_storage.ListResult result = await firebase_storage
        .FirebaseStorage.instance
        .ref()
        .child("deneme")
        .child("resimler")
        .listAll();
    //result.items.forEach((firebase_storage.Reference ref) {
      //debugPrint("found file: ${ref.name}");
    //});

    //debugPrint("resultın ilk elemanı adı: " + result.items[1].name.toString());

    await firebase_storage.FirebaseStorage.instance
        .ref()
        .child("deneme")
        .child("resimler")
        .child(result.items[1].name.toString())
        .getData();
    var url = await firebase_storage.FirebaseStorage.instance
        .ref()
        .child("deneme")
        .child("resimler")
        .child(result.items[1].name.toString())
        .getDownloadURL();

    debugPrint("ilk resim urli: " + url.toString());

    final _text= url.toString();
    setState(() {    });
    debugPrint("text: "+ _text);

    
  }

}

这是我得到的控制台输出和错误：

Performing hot reload...
Syncing files to device SNE LX1...

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building:
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'

When the exception was thrown, this was the stack: 
#2      new Text (package:flutter/src/widgets/text.dart:370:10)
#3      StorageAlbumDisplayState.build.<anonymous closure> (package:firebase/StorageAlbumDisplay.dart:43:44)
#4      SliverChildBuilderDelegate.build (package:flutter/src/widgets/sliver.dart:449:22)
#5      SliverMultiBoxAdaptorElement._build (package:flutter/src/widgets/sliver.dart:1130:28)
#6      SliverMultiBoxAdaptorElement.performRebuild.processElement (package:flutter/src/widgets/sliver.dart:1076:66)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 7 of 663 libraries in 2.441ms.
W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->getInt(Ljava/lang/Object;J)I (greylist, linking, allowed)
W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->putObject(Ljava/lang/Object;JLjava/lang/Object;)V (greylist, linking, allowed)
W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->putLong(Ljava/lang/Object;JJ)V (greylist, linking, allowed)
W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->getInt(Ljava/lang/Object;J)I (greylist, linking, allowed)

这是我按下获取图片按钮后的控制台输出，您可以看到图片的网址为：

W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->getInt(Ljava/lang/Object;J)I (greylist, linking, allowed)
W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->putObject(Ljava/lang/Object;JLjava/lang/Object;)V (greylist, linking, allowed)
W/meb.firebase(24891): Accessing hidden method Lsun/misc/Unsafe;->putLong(Ljava/lang/Object;JJ)V (greylist, linking, allowed)
V/AudioManager(24891): querySoundEffectsEnabled...
I/flutter (24891): the pic url: https://firebasestorage.googleapis.com/v0/b/kalfa-firebase-projem.appspot.com/o/deneme%2Fresimler%2Fisim1608375656296?alt=media&token=b0ce2662-b668-4832-af20-0e9a20cf5446
I/flutter (24891): text: https://firebasestorage.googleapis.com/v0/b/kalfa-firebase-projem.appspot.com/o/deneme%2Fresimler%2Fisim1608375656296?alt=media&token=b0ce2662-b668-4832-af20-0e9a20cf5446

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building:
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'

When the exception was thrown, this was the stack: 
#2      new Text (package:flutter/src/widgets/text.dart:370:10)
#3      StorageAlbumDisplayState.build.<anonymous closure> (package:firebase/StorageAlbumDisplay.dart:43:44)
#4      SliverChildBuilderDelegate.build (package:flutter/src/widgets/sliver.dart:449:22)
#5      SliverMultiBoxAdaptorElement._build (package:flutter/src/widgets/sliver.dart:1130:28)
#6      SliverMultiBoxAdaptorElement.performRebuild.processElement (package:flutter/src/widgets/sliver.dart:1076:66)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 370 pos 10: 'data != null'
════════════════════════════════════════════════════════════════════════════════════════════════════

【问题讨论】：

  • 您必须在上传时获取图片的下载网址并将其保存在数据库中以供进一步使用。
  • 按照@asifali 所说的获取图片的 URL，然后在您的代码中使用Image.network("urlofimage") 来显示图片。
  • YouTube 中有人在不使用 downloadUrl 的情况下执行此操作。他没有使用 listAll() 方法，但这可能是我想要的一个例子。他编码 ...child("imageFileName_i").getData(maxSize).then(data){imageFile = data;} 和 imageFile 在这里是 Uint8list 变体。之后，他将 imageFile 放入Image.memory(ImageFile, fit: Boxfit.cover)，并且 image.memory 也在 gridDelegate 中。他是这样做的。我不知道我们是否可以在这里分享 youtube 链接，所以视频的名称是使用 Firebase 存储创建图像网格。如果你愿意，你可以搜索。事实上，如果我可以获取所有图像的 url，我可以使用 downUrl。
  • 如何获取所有图片的 downloadUrl 作为列表？我必须将所有图像作为一个列表 downUrls 以在网格视图中显示它们不是吗？所以我可以把它们放在 GridView 的 GridTile 中。

标签： firebase flutter firebase-storage


【解决方案1】：

最后我解决了我的问题，只是遇到了一个我无法找出原因的简单错误。正如@asifali 和@mukul 所说，如果没有getDowloadUrl，我将无法做到。在我获得存储的图像名称并使用...listAll().then(...)... 获取DownloadUrls 后，我确实将它们放入我的FirebaseFirestore 集合并使用Image.network("urlOfImages") 获取所有图像。这是我得到的解决方案代码、控制台输出和错误。如果你能帮我解决这个新错误，我会很高兴的。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;

import 'package:flutter/material.dart';

class StorageAlbumDisplay extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return StorageAlbumDisplayState();
  }
}

class StorageAlbumDisplayState extends State<StorageAlbumDisplay> {


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ALBUM DİSPLAY PAGE"),
      ),
      body: StreamBuilder(
          stream: FirebaseFirestore.instance.collection("storage_images").snapshots(),
          builder: (context, snapshot) {
            final querySnapshot = snapshot.data;
            return Container(
              child: Column(
                children: [
                  RaisedButton(
                      child: Text("Get Images"),
                      onPressed: () {
                        getImages();
                      }),
                  Flexible(
                    child: GridView.builder(
                        shrinkWrap: true,
                        itemCount: 10,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2),
                        itemBuilder: (context, index) {
                          final map = querySnapshot.docs[index].data();
                          return GridTile(
                            child: Image.network(map["url"]),
                          );
                        }),
                  ),
                ],
              ),
            );
          }
      ),
    );
  }

  void getImages() async {
    for(int i=0; i<10; i++){

      final _resultName  = await firebase_storage
          .FirebaseStorage.instance
          .ref()
          .child("deneme")
          .child("resimler")
          .listAll().then((value) => value.items[i].name);
      String resultName = _resultName.toString();
      debugPrint("resultın ${i+1}. elemanının adı: " + resultName);
      
      final _resultUrl  = await firebase_storage
        .FirebaseStorage.instance
        .ref()
        .child("deneme")
        .child("resimler")
        .listAll().then((value) => value.items[i].getDownloadURL());
      String resultUrl = _resultUrl.toString();
      debugPrint("resultın ${i+1}. elemanının urli: " + resultUrl);

      await FirebaseFirestore.instance.collection("storage_images").add({
        "name": resultName, "url": resultUrl
      });
    }


  }
}

控制台输出和错误：

Performing hot restart...
Syncing files to device SNE LX1...
Restarted application in 2.856ms.
W/meb.firebase(10713): Accessing hidden method Lsun/misc/Unsafe;->getLong(Ljava/lang/Object;J)J (greylist,core-platform-api, linking, allowed)
V/AudioManager(10713): querySoundEffectsEnabled...
W/DynamiteModule(10713): Local module descriptor class for providerinstaller not found.
D/ConnectivityManager(10713): requestNetwork and the calling app is: meb.firebase
I/DynamiteModule(10713): Considering local module providerinstaller:0 and remote module providerinstaller:0
W/ProviderInstaller(10713): Failed to load providerinstaller module: No acceptable module found. Local version is 0 and remote version is 0.
D/ConnectivityManager(10713): requestNetwork and the calling app is: meb.firebase
V/AudioManager(10713): querySoundEffectsEnabled...
W/meb.firebase(10713): Accessing hidden method Lsun/misc/Unsafe;->getObject(Ljava/lang/Object;J)Ljava/lang/Object; (greylist, linking, allowed)
W/meb.firebase(10713): Accessing hidden method Lsun/misc/Unsafe;->getObject(Ljava/lang/Object;J)Ljava/lang/Object; (greylist, linking, allowed)

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building StreamBuilder<QuerySnapshot>(dirty, state: _StreamBuilderBaseState<QuerySnapshot, AsyncSnapshot<QuerySnapshot>>#eb94f):
The getter 'size' was called on null.
Receiver: null
Tried calling: size

The relevant error-causing widget was: 
  StreamBuilder<QuerySnapshot> file:///C:/ornekler/firebase/flutter_app/firebase/lib/StorageAlbumDisplay.dart:23:13
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      StorageAlbumDisplayState.build.<anonymous closure> (package:firebase/StorageAlbumDisplay.dart:38:50)
#2      StreamBuilder.build (package:flutter/src/widgets/async.dart:525:81)
#3      _StreamBuilderBaseState.build (package:flutter/src/widgets/async.dart:129:48)
#4      StatefulElement.build (package:flutter/src/widgets/framework.dart:4744:28)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

还有一件事：如果我想用 FutureBuilder 而不是 Streambuilder 来做这件事，我会得到一个未来的错误。如果有人用 FutureBuilder 来做这件事，我也会很高兴。谢谢你的帮助。

【讨论】：

    猜你喜欢
    • 2020-02-12
    • 2017-12-29
    • 2020-10-29
    • 2020-04-23
    • 1970-01-01
    • 1970-01-01
    • 2021-07-04
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode