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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…