Flutter - Use List in GroupedListView and GridView.builder

147 views Asked by At

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

Preview

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.

0

There are 0 answers