努力将图像从 Firebase Firestore 加载到 Flutter 应用程序中的 ListItem答案

【问题标题】：Struggling to load images from Firebase Firestore into ListItem in Flutter app努力将图像从 Firebase Firestore 加载到 Flutter 应用程序中的 ListItem
【发布时间】：2021-02-02 00:06:25
【问题描述】：

我在将 Firebase Firestore 数据库中的图像加载到 Flutter 应用时遇到了一点问题。我有点坚持这一点，因为我不知道目前该做什么。我已经看到了一种使用 NetworkImage 在列表图块上下载图像的方法，但它只执行一个图像。我正在想办法为 Firestore 数据库中的每个项目使用单独的图像。

我已将图像 URL 从 Firebase 存储连接到 Firestore 下的 imageURL 键，这是一个字符串。但我仍在努力弄清楚如何做到这一点。我还下载了所有依赖项，例如 Firebase 和 Firestore。如果有人确实提供帮助或分享他们如何处理类似问题的提示，我们将不胜感激！ :)

class HomeTab extends StatefulWidget {
  @override
  _HomeTabState createState() => _HomeTabState();
}

class _HomeTabState extends State<HomeTab> {
  

  @override
  Widget build(BuildContext context) {

// This will reference our posts collection in Firebase Firestore NoSQL database.
CollectionReference posts = FirebaseFirestore.instance.collection('posts');

return Center(
  child: Container(
    width: 250,
    child: StreamBuilder<QuerySnapshot>(
      // Renders every post from the Firebase Firestore Database.
      stream: posts.snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }

        return new ListView(
          children: snapshot.data.docs.map((DocumentSnapshot document) {

            return Card(
              margin: EdgeInsets.all(20.0),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
              elevation: 10,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [

                  ListTile(
                    // Renders the title on every single listview.
                    title: new Text(document.data()['title']),
                    // leading: new NetworkImage(''),
                    onTap: () {

                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => ReaderPage(),
                        ),
                      );

                    },
                  ),


                  

                ],

                // Added Column
                // In case if things don't work, go back to this.
                // child: new ListTile(
                //   title: new Text(document.data()['text']),
                // ),
              ),
            );
          }).toList(),

        );
      },
    ),
  ),
);


}

}

Here is my Firebase Storage

My Firestore database

【问题讨论】：

您的代码目前只能获取title 字段，您可以分享您尝试获取文件的代码吗？您还可以分享这种“使用 NetworkImage 下载列表磁贴上的图像的方式”吗？

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

NetworkImage 类不是颤振小部件类。它负责从提供的 URL 下载图像。它继承自 ImageProvider 类。

来自颤振文档：

从网络中获取给定的 URL，并将其与给定的比例相关联。

使用Image.network 表示由NetworkImage 支持的Image 小部件的简写。

您应该使用Image 小部件的Image.network 命名构造函数来创建一个颤振小部件，用于在NetworkImage 的帮助下显示图像。

您应该将小部件树中的 NetworkImage 替换为：

new Image.network("https://i.stack.imgur.com/W98kA.png")

【讨论】：