Flutter - Grouped List - GeeksforGeeks

14 May, 2021
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:
List Items can be separated into groups.An individual header can be given to each groupMost fields from the ListView.builder is available in this library
List Items can be separated into groups.
An individual header can be given to each group
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,
  ),
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:
 
 
sweetyty
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs