grouped_scroll_view

A package to display a grouped list of items. Provide a List, a grouper, and let it display it as a ListView, a GridView or anything else. Supports checkbox or radio in a scrollView.

Preview

Getting Started

Add the package to your pubspec.yaml:

dependencies:
  grouped_scroll_view: <latest_version>

Features

• Support stickyHeader、customGrouper、 customHeader、customFooter
• Support checkbox or radio in a scrollView

Usage

• grouped for grid view

GroupedScrollView.grid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(mainAxisSpacing: 5, crossAxisSpacing: 5, crossAxisCount: widget.crossAxisCount),
        groupedOptions: GroupedScrollViewOptions(
                itemGrouper: (Person person) {
                  return person.birthYear;
                },
                stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
                      color: Colors.white,
                      padding: const EdgeInsets.all(8),
                      constraints: const BoxConstraints.tightFor(height: 30),
                      child: Text(
                        '$year',
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),
                    )
            ),
        itemBuilder: (BuildContext context, Person item) {
          return Container(
            color: Colors.lightGreen,
            padding: const EdgeInsets.all(8),
            constraints: const BoxConstraints.tightFor(width: 100),
            child: Center(
              child: Text(
                item.name,
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          );
        },
        data: DataCache.instance.persons,
        headerBuilder: (BuildContext context) => Column(
          children: const [
            Divider(
              thickness: 5,
            ),
            Center(
              child: Text(
                'CustomHeader',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            Divider(
              thickness: 5,
            ),
          ],
        ),
        footerBuilder: (BuildContext context) => Column(
          children: const [
            Divider(
              thickness: 5,
            ),
            Center(
              child: Text(
                'CustomFooter',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            Divider(
              thickness: 5,
            ),
          ],
        ),
      )

• grouped for list view

    GroupedScrollView.list(
            groupedOptions: GroupedScrollViewOptions(
            itemGrouper: (Person person) {
              return person.birthYear;
            },
            stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
                  color: Colors.white,
                  padding: const EdgeInsets.all(8),
                  constraints: const BoxConstraints.tightFor(height: 30),
                  child: Text(
                    '$year',
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                )),
            itemBuilder: (BuildContext context, Person item) {
              return Container(
                constraints: const BoxConstraints.expand(height: 35),
                child: Column(
                  children: [
                    Container(
                      constraints: const BoxConstraints.expand(height: 30),
                      color: Colors.lightGreen,
                      child: Center(
                        child: Text(
                          item.name,
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            },
            data: DataCache.instance.persons,
            headerBuilder: (BuildContext context) => Column(
              children: const [
                Divider(
                  thickness: 5,
                ),
                Center(
                  child: Text(
                    'CustomHeader',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                Divider(
                  thickness: 5,
                ),
              ],
            ),
            footerBuilder: (BuildContext context) => Column(
              children: const [
                Divider(
                  thickness: 5,
                ),
                Center(
                  child: Text(
                    'CustomFooter',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                Divider(
                  thickness: 5,
                ),
              ],
            ),
          )

Additional information

• If the list needs to support checkbox or radio, please set toggleEnabled is true

final controller = GroupedToggleController(
        toggleType: GroupedToggleType.checkbox,
        onToggleChanged: (int idx, bool selected) {
          // ...
        },
        toggleStyle: GroupedToggleStyle(),
    );
GroupedScrollViewWithToggle.grid({
    data: List<T>,
    itemBuilder: (BuildContext context, T item) { /*...*/},
    toggleController: controller,
    toggleEnabled: true,
    // ...
});

// dispose
controller.dispose();