A custom list that separates your data into groups with headlines!

Features #

• Supports both List and Grid view.
• Separates your data into groups.
• Sort your data in a descending or ascending order.
• Assign unique header to each group.

💾 Installation #

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  z_grouped_list: <latest version>

Now in your dart code you can import it

import 'package:z_grouped_list/z_grouped_list.dart';

📦 Usage #

Important!!! do not forget to wrap your code with an Expanded or a SizedBox.

Simple List implementation:

ZGroupedList(
      // your items list
      items: books,
      // What element should you sort by?
      sortBy: (item){
        int year = item['year'];
        return year;
      },
      // Item widget
      itemBuilder: (context, item){
        String? name = item['name'];
        return Text(name ?? "empty");
      },
      // Group separator widget
      groupSeparatorBuilder: (year) {
        return Text(year.toString(),);
      }, ),

Grid List implementation:

ZGroupedList.grid(
      // Show 3 items horizontally
      crossAxisCount: 3,

      // All items list
      items: books,
      // What element should you sort by?
      sortBy: (item){
        int year = item['year'];
        return year;
      },
      // Item widget
      itemBuilder: (context, item){
        String? name = item['name'];
        return Text(name ?? "empty");
      },
      // Group separator widget
      groupSeparatorBuilder: (year) {
        return Text(year.toString(),);
      },

      // Custom grid delegate (optional)
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 80,
          childAspectRatio: 5 / 9,
          crossAxisSpacing: 25,
          mainAxisSpacing: 15),
    ),

🎯Parameters #

For Normal List:

Extras for Grid List: