How to convert a Row to a GridView in Streambuilder

Question

I currently have a StreamBuilder nested inside a SingleChildScrollView that returns a Row of widgets, which is scrollable along the horizontal axis. I want to change this to a GridView with crossAxisCount: 2, that is scrollable along the vertical axis instead. Any ideas about how to do this please?

Here's my current code:

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: StreamBuilder<QuerySnapshot> (
                  stream: _firestore
                      .collection('recipes')
                      .where('favouritedBy', arrayContains: widget.userEmail)
                      .snapshots(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return Center(
                        child: CircularProgressIndicator(
                          backgroundColor: Colors.lightBlueAccent,
                        ),
                      );
                    }
                    if (snapshot.data == null) {
                      return Center(
                        child: CircularProgressIndicator(
                          backgroundColor: Colors.lightBlueAccent,
                        ),
                      );
                    }
                    final recipes = snapshot.data.documents;
                    List<Widget> recipeWidgets = [];
                    for (var recipe in recipes) {
                      final recipeTitle = recipe.data['recipeTitle'];
                      final ingredients = recipe.data['ingredients'];
                      final videoID = recipe.data['videoID'];
                      final youtubeURL = recipe.data['youtubeURL'];
                      final method = recipe.data['method'];
                      final thumbnail = recipe.data['thumbnail'];
                      final recipeID = recipe.data['recipeID'];
                      final favouritedBy = recipe.data['favouritedBy'];
                      final recipeWidget = FavouritesRecipeCard(
                        recipeTitle: recipeTitle,
                        videoID: videoID,
                        youtubeURL: youtubeURL,
                        recipeID: recipeID,
                        favouritedBy: favouritedBy,
                        method: method,
                        ingredients: ingredients,
                        thumbnail: thumbnail,
                      );
                      recipeWidgets.add(recipeWidget);
                    }
                    return Row( 
                     children: recipeWidgets,
                    ); //This is the Row I would like to change to be a GridView instead
                  }),
            ),

Answer 1

Problem solved! Here's the solution:

I just changed the Row to be a GridView.count widget:

return GridView.count(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  crossAxisCount: 2,
                  crossAxisSpacing: 10.0,
                  mainAxisSpacing: 10.0,
                  children: recipeWidgets,
                );

Hope this helps someone in the future!

Answer 2

return Row( 
   GridView.builder(
  itemCount: snapshot.data.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),
  itemBuilder: (BuildContext context, int index) {
    return new Card(
      child: new GridTile(
        footer: new Text(snapshot.data.documentsp[index].data()[key]),
        child: new Text(snapshot.data.documentsp[index].data()[key]), 
      ),
    );
   },
  ),
);