grouped_grid

Description:

grouped grid

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"
copied to clipboard
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
}
}

copied to clipboard
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