Flutter – Grouped List

The grouped_list package in Flutter as the name suggests is used to create list items in different groups. This package also provides 3 specific functions that are listed below:

1. List Items can be separated into groups.
2. An individual header can be given to each group
3. Most fields from the ListView.builder is available in this library

A Grouped List can be created as follows using this package:

Syntax:
   GroupedListView<dynamic, String>(
    elements: _elements,
    groupBy: (element) => element['group'],
    groupSeparatorBuilder: (String groupByValue) => Text(groupByValue),
    itemBuilder: (context, dynamic element) => Text(element['name']),
    itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']),
    useStickyGroupSeparators: true,
    floatingHeader: true,
    order: GroupedListOrder.ASC,
  ),

Key Parameters:

The below list holds all the parameters of the GroupedListView with their explanation:

• element: It comprises the content that is to be displayed in the list. It is a required field.
• groupBy: The content and the groups are mapped using this function. It is a required field.
• itemBuilder / indexedItemBuilder:  This functions the widget that defines the content of the app.
• separator: This widget separates the content of one group from another.
• order: It sets the order in which the grouped list is displayed.

Now let’s implement the same in the below example.

Example:

Add the grouped_list library in the dependencies section of the pubspec.yaml file as shown below:

Now import the dependency to the code file using the below line of code:

import 'package:grouped_list/grouped_list.dart';

Now, it’s time to define the List items. We in this example will add the following items :

List _elements = [
  {'name': 'Virat Kohli', 'group': 'RCB'},
  {'name': 'Rohit Sharma', 'group': 'MI'},
  {'name': 'AB de Villiers', 'group': 'RCB'},
  {'name': 'Jasprit Bumrah', 'group': 'MI'},
  {'name': 'KL Rahul', 'group': 'KXIP'},
  {'name': 'Md. Shammi', 'group': 'KXIP'},
];

Now structure the application by extending the StatelessWidget and call the GroupedListView method as shown below:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element['group'],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1['name'].compareTo(item2['name']),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true,
          groupSeparatorBuilder: (String value) => Padding(
              ),
            );
          },
        ),
      ),
    );
  }
}

Now design the UI for the list as you want. For the sake of simplicity we will be using the ItemBuilder as follows:

Dart

itemBuilder: (c, element) {
  return Card(
    elevation: 8.0,
    margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
    child: Container(
      child: ListTile(
        contentPadding:
        EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: ImageIcon(
          NetworkImage('http://www.pngall.com/wp-content/uploads/2017/04/IPL-Logo-2017-PNG.png')
        ),
        title: Text(element['name']),
      ),
    ),
  );
},

Complete Source Code:

Dart

import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';

void main() => runApp(MyApp());

List _elements = [
  {'name': 'Virat Kohli', 'group': 'RCB'},
  {'name': 'Rohit Sharma', 'group': 'MI'},
  {'name': 'AB de Villiers', 'group': 'RCB'},
  {'name': 'Jasprit Bumrah', 'group': 'MI'},
  {'name': 'KL Rahul', 'group': 'KXIP'},
  {'name': 'Md. Shammi', 'group': 'KXIP'},
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element['group'],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1['name'].compareTo(item2['name']),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              value,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                  EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: ImageIcon(
                    NetworkImage('http://www.pngall.com/wp-content/uploads/2017/04/IPL-Logo-2017-PNG.png')
                  ),
                  title: Text(element['name']),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Output: