grouped_grid 0.1.2

A package to display a grouped grid of items with optional group headers and footers.

grouped_grid

A package to display a grouped grid of items.

Preview

Image for the application in the example folder:

Features

Provides a grouped GridView variant with:

• Support for main header and footer.
• Support for group headers and footers (both optionals).
• Option to use sticky group headers or not (defaults to sticky group headers).

SDK Requirements

This package requires Dart 3 as it uses Records syntax in the itemBuilder signature.

environment:
  sdk: '>=3.0.0 <4.0.0'
  flutter: ">=3.10.0"

Usage

The example uses this code to create the grid of TimeControl items grouped by TimeControlType with group sticky headers.
Check the example folder for the full implementation.

import 'package:flutter/material.dart';
import 'package:grouped_grid/grouped_grid.dart';

import '../../../domain/entity/time_control.dart';

class TimeControlGroupedGridView extends StatelessWidget {

  const TimeControlGroupedGridView({super.key, required this.data, required this.columnCount});

  final int columnCount;
  final Map<TimeControlType, List<TimeControl>> data;

  @override
  Widget build(BuildContext context) {
    return GroupedGridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columnCount,
        crossAxisSpacing: 2,
        mainAxisSpacing: 2,
      ),
      groupKeys: data.keys,
      groupHeaderBuilder: _groupHeaderBuilder,
      itemCountForGroup: _itemCountForGroup,
      itemBuilder: _itemBuilder,
    );
  }

  Widget _groupHeaderBuilder(BuildContext context, TimeControlType group) {
    // see example folder
  }

  int _itemCountForGroup(TimeControlType key) {
    // see example folder
  }

  Widget _itemBuilder(BuildContext context, ({TimeControlType key, int itemIndex}) group) {
    // see example folder
  }
}

Aknowlodgements

This project is a merge of ideas from two dart packages and I would like to thank both authors:

• group_grid_view
• gouped_scroll_view