需要帮助获取 firestore 文档以映射到对象，并将对象发送到将显示在 UI 中的列表

Question

我真的很想解决这个问题，但我被卡住了。我正在尝试从 firestore 获取数据并将值添加到一个对象，然后将该对象添加到这些对象的列表中。我不能为我的生活让这个工作。谁能帮忙？我正在尝试为故事 1、故事 2 和故事 3 创建一个单独的对象。最终，我试图做到这一点，以便在数据库更新时，gridview 也会更新。我考虑过使用流生成器，但如果可能的话，我想将数据发送到对象并发送到列表中，以便通过调用列表更容易管理。这是代码：

class Story{
String storyTitle;
String storyLink;
String storyImage;
String storySummary;
String category;


Story({this.storyImage, this.storyLink, this.storySummary, this.storyTitle, this.category,});
}

List<Story> storiesList = [];

//data from firebase
Collection - topStories
   Document - (this will be the firebase User ID)
      Fields - story1{storyTitle: "title"
                      storySummary: "summary"
                      category: "category}
               story2{storyTitle: "title"
                      storySummary: "summary"
                      category: "category}
               story3{storyTitle: "title"
                      storySummary: "summary"
                      category: "category}

GridView.builder(
      
          itemCount: storiesList.length
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 12/16,  crossAxisCount: 2, crossAxisSpacing: 20.0, mainAxisSpacing: 20),
          itemBuilder: (BuildContext context, int index) {
            return ClipRRect(
            borderRadius: BorderRadius.circular(16.0),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                      color: Colors.black12,
                      offset: Offset(3.0, 6.0),
                      blurRadius: 10.0)
                ],
                borderRadius: BorderRadius.circular(20),
                image: DecorationImage(
                  image: NetworkImage('${storiesList.[index].storyImage}'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.only(
                    top: 8.0, bottom: 0.0, left: 0.0, right: 0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Text('${storiesList[index].storyTitle}')
                    Text('${storiesList[index].storySummary}')
                  ],
                ),
              ),
            ),
          );
          },
        ),

Answer 1

Firebase 可以输出为流，然后您可以使用 StreamBuilder 来填充您的 UI。然后当数据库更新时它会更新 UI.

您需要的不是故事列表，而是故事列表流。

需要帮助获取 firestore 文档以映射到对象，并将对象发送到将显示在 UI 中的列表

Need help getting firestore documents to map to an object, and send the object to a list that will display in the UI

flutter

gridview

google-cloud-firestore

snapshot