flutter_group_list_view 1.0.3 copy "flutter_group_list_view: ^1.0.3" to clipboard
flutter_group_list_view: ^1.0.3 copied to clipboard

Flutter package for SliverList、ListView that allows you to group list items and support headers 、footers.

FlutterGroupListView package for Flutter. #

Features #

  • List Items can be grouped.
  • Support ListView、SliverList.
  • Support header、footer for each group.
  • All fields from ListView.builderSliverList.builder constructor available.

screenshot #

image

Getting Started #

Add the package to your pubspec.yaml:

flutter_group_list_view: ^1.0.3

In your dart file, import the library:

import 'package:flutter_group_list_view/flutter_group_list_view.dart';

Instead of using a ListView create a GroupListView Widget:

List _elements = [
 {
   "storeName": "ASICS Store",
   "storeCode": "s01",
   "goodsList": [{}, {}]
 },
 {
   "storeName": "SALOMON Store",
   "storeCode": "s02",
   "goodsList": [{}]
 },
 {
   "storeName": "ASICS Store",
   "storeCode": "s01",
   "goodsList": [{}, {}]
 }
];

CustomScrollView(
 slivers: [
   GroupSliverListView(
     sectionCount: _elements.length,
     itemInSectionCount: (int section) {
       return _elements[section]['goodsList'].length;
     },
     headerForSectionBuilder: (int section) {
       return Container(
         height: 40,
         margin: const EdgeInsets.only(left: 12, right: 12, top: 10),
         decoration: const BoxDecoration(
           borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
           color: Colors.green,
         ),
         child: const Row(
           children: [Text("this is header")],
         ),
       );
     },
     itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
       return Container(
         height: 90,
         margin: const EdgeInsets.only(left: 12, right: 12),
         color: Colors.white,
         child: const Row(
           children: [Text("this is item")],
         ),
       );
     },
     separatorBuilder: (IndexPath indexPath) {
       return Container(
         height: 1,
         color: Colors.grey,
       );
     },
     footerForSectionBuilder: (int section) {
       return Container(
         height: 40,
         margin: const EdgeInsets.only(left: 12, right: 12),
         decoration: const BoxDecoration(
           borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
           color: Colors.blue,
         ),
         child: const Row(
           children: [Text("this is footer")],
         ),
       );
     },
   )
 ],
);

Parameters: #

  • sectionCount: The number of sections in the SliverListView. (required)
  • itemInSectionCount. Function which returns the number of items in a specified section. (required)
  • itemInSectionBuilder: Function which returns an Widget which defines the item at the specified IndexPath. itemBuilder provides the current section and index. (required)
  itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
    return Container(
      height: 90,
      margin: const EdgeInsets.only(left: 12, right: 12),
      color: Colors.white,
      child: const Row(
        children: [Text("this is item")],
      ),
    );
  }
  • headerForSectionBuilder: Function which returns an Widget which defines the section header for each group. (required)
  • separatorBuilder: Function which returns an Widget which defines the divider/separator at the specified IndexPath.
  • footerForSectionBuilder: Function which returns an Widget which defines the section footer for each group.
3
likes
140
pub points
76%
popularity

Publisher

unverified uploader

Flutter package for SliverList、ListView that allows you to group list items and support headers 、footers.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_group_list_view