Flutter从路径显示firebase存储图像

Question

我一直在阅读一些与此相关的问题，但我找不到任何与我正在尝试做的事情真正相关的东西，而我想要做的事情非常简单。

我有来自 Firebase 存储的图像文件的路径，比如：

SharedPreferences prefs = await SharedPreferences.getInstance();
String fileName = prefs.getString('currentProfileImage');

StorageReference storageReference = FirebaseStorage.instance
  .ref()
  .child(widget.currentUserUID.toString() + '/profile/' + fileName);

所以图片文件路径会是这样的：

b8sJ7cEHCFdjh46wZNp5xThbvVzz2/profile/image_picker209656937087714.jpg

我只想显示这张图片。就这样。如何将知道此文件的确切路径转换为 ​​Image 类型的对象？

Answer 1

您需要先使用 putFile() 将图像保存到 Firebase 存储：

StorageTaskSnapshot snapshot = await storage
   .ref()
   .child(widget.currentUserUID.toString() + '/profile/' + fileName)
   .putFile(file)
   .onComplete;

---

然后在 Firebase Storage 中获取图片的url 并将其保存到 Firestore，例如：

  final String downloadUrl =
      await snapshot.ref.getDownloadURL();
  await Firestore.instance
      .collection("images")
      .add({"url": downloadUrl, "name": imageName});

然后要显示图像，您可以执行以下操作：

body: Container(
  padding: EdgeInsets.all(10.0),
  child: FutureBuilder(
    future: getImages(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return ListView.builder(
            shrinkWrap: true,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                contentPadding: EdgeInsets.all(8.0),
                title:
                    Text(snapshot.data.documents[index].data["name"]),
                leading: Image.network(
                    snapshot.data.documents[index].data["url"],
                    fit: BoxFit.fill),
              );
            });
      } else if (snapshot.connectionState == ConnectionState.none) {
        return Text("No data");
      }
      return CircularProgressIndicator();
    },
  ),
),

/// code here

  Future<QuerySnapshot> getImages() {
    return fb.collection("images").getDocuments();
  }

getImages() 将检索集合中的数据，然后Image.network 将获取图像的 url 并在应用程序中显示图像。