I'm trying to build a Grouped List based on the String component 'group' of a List, the other String component out of the same list 'name' must be shown in a grid underneath the corresponding group.
Code:
import 'package:flutter/material.dart';
import 'package:simple_grouped_listview/simple_grouped_listview.dart';
import 'package:sticky_headers/sticky_headers.dart';
class CombineStickyGrid extends StatefulWidget {
const CombineStickyGrid({super.key});
@override
State<CombineStickyGrid> createState() => _CombineStickyGridState();
}
class _CombineStickyGridState extends State<CombineStickyGrid> {
final groupedData = [
{'group': 'Team A', 'name': 'John'},
{'group': 'Team B', 'name': 'Will'},
{'group': 'Team C', 'name': 'Mike'},
{'group': 'Team D', 'name': 'Wayne'},
{'group': 'Team A', 'name': 'Beth'},
{'group': 'Team B', 'name': 'Miranda'},
{'group': 'Team D', 'name': 'Bert'},
{'group': 'Team A', 'name': 'Fred'},
{'group': 'Team A', 'name': 'Bob'},
{'group': 'Team B', 'name': 'Xian'},
{'group': 'Team C', 'name': 'Mi Ping'},
{'group': 'Team D', 'name': 'Olaf'},
{'group': 'Team A', 'name': 'Oscar'},
];
@override
Widget build(BuildContext context) {
return GroupedListView<bool, int>(
items: List<int>.generate(100, (index) => index + 1),
customBuilder:
(context, bool isEvenHeader, List<IndexedItem<int>> items) {
return StickyHeader(
header: Container(
alignment: Alignment.topCenter,
color: Colors.blue,
padding: const EdgeInsets.all(16),
child: Text(
isEvenHeader ? 'Even' : 'Odd',
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
content: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5),
itemCount: items.length,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, int index) {
return Container(
color: Colors.white,
padding: const EdgeInsets.all(8),
child: Text(items[index].item.toRadixString(10),
textAlign: TextAlign.center),
);
},
),
);
},
itemGrouper: (int i) => i.isEven,
itemsCrossAxisAlignment: CrossAxisAlignment.center,
);
}
}
I've tried to change the 'items' and connected items with groupedData/groupedData['name']/groupedData['group']. I was expecting the data from the list to show up in a grouped stickyhead list with the names in grid underneath.