grouped_grid 0.1.2 copy "grouped_grid: ^0.1.2" to clipboard
grouped_grid: ^0.1.2 copied to clipboard

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

grouped_grid #

Pub support

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:

4
likes
150
pub points
60%
popularity

Publisher

verified publishernogueira.cc

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, sliver_tools

More

Packages that depend on grouped_grid