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 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, ),
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:
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:
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(
),
title: Text(element[ 'name' ]),
),
),
);
}, |
Complete Source Code:
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(
),
title: Text(element[ 'name' ]),
),
),
);
},
),
),
);
}
} |
Output: