Need Help Getting Firestore Documents To Map To An Object, And Send The Object To A List That Will Display In The UI

I am really trying to figure this out but I am stuck. I am trying to get data from firestore and add the values to an object, then add that object to a list of those objects. I can not for the life of me get this to work. Can anyone help? I am trying to make a separate object for story1, story2, and story3. Ultimately, I am trying to make it so that when the database updates, the gridview updates as well. I thought about using a stream builder but if possible I would like to send the data to objects and into a list so that it is easier to manage by just calling the list. Here is the code:

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}')
                  ],
                ),
              ),
            ),
          );
          },
        ),

Firebase can output as a stream, and then you can use StreamBuilder to populate your UI. Then when the database updates it will update the UI.

Instead of a list of stories, you need a stream of list of stories.