flutter - How to make a grid within a Grouped List

Question

I'm pretty new to flutter and I am trying to create a grouped list view with the GroupedListView widget(package) however, I want the items in the group to appear as a grid. When I try to do grid view, the cards are sized the way I want but each one appears on another row, while when I do a regular list, the size changes drastically. How can I make the items appear on the same row?

My current code:

Widget _buildTeam(context) {
    return GroupedListView<dynamic, String>(
        physics: ScrollPhysics(),
        shrinkWrap: true,
        elements: routes == null ? [] : routes,
        groupBy: (element) => element['locationName'],
      groupSeparatorBuilder: (String value) => Column(
          children: [
      Padding(
      padding: const EdgeInsets.only(right: 16.0, left: 16.0, bottom: 25),
      child: Container(
        height: 55.0,
        color: Colors.grey[800],
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(value.toUpperCase(),
              style: TextStyle(
                color: Colors.grey[200],
                fontSize: 20.0
            ),
            )
          ],
        ),
      ),
    ),
      ]
      ),
      itemBuilder: (context, element) => Padding(
        padding: const EdgeInsets.only(left: 35.0, right: 35.0),
        child: GridView.count(
                          controller: _controller,
                          physics: ScrollPhysics(),
                          childAspectRatio: 0.75/ 1.4,
                          padding: EdgeInsets.zero,
                          scrollDirection: Axis.vertical,
                          mainAxisSpacing: 1.0,
                          crossAxisSpacing: 20.0,
                          shrinkWrap: true,
                          crossAxisCount: 2,
                          children: List.generate(1, (index) {
                            return Padding(
                              padding: const EdgeInsets.only(bottom: 25.0),
                              child: TeamCard1(element["driver"], element["helper"], element["lastUpdate"]),
                            );
                          }),
                        ),
      ),
        order: GroupedListOrder.ASC
    );
  } 

What it looks like: Screenshot1

What I need it to look like: Screenshot2

Answer 1

Your itemBuilder uses only one element at a time to produce a GridView. So what you get for your group 'Buffalo' is two GridViews with only one element each. I think the easiest way forward is to transform your routes before creating a GroupedListView, for example (in pseudocode):

List<GridView> routeGridsByLocation = groupBy(routes, location).map((routesForThisLocation) => GridView(...));