F lutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload
In this article, we will Explore Grouped ListView In Flutter Using the grouped_list_packaged With the help of the package, we can easily achieve flutter grouped list and describes his some properties and how to use them in your flutter applications. So let’s get started.
group_list_ library
Table Of Contents:
Grouped List View:
The flutter grouped package is used to create its list item in different groups. As its name suggests. It provides some specific functions which are given below.
- Can be separated into groups of all list item.
- Can give one header for each group
Required Properties of the Grouped ListView:
elements: It contains a list of data, which we have to display in the list. These properties are very important.
groupBy: A function using which to map content and groups.
itemBuilder: This functions as the widget that defines the content of the app.
groupSeparatorBuilder: This widget separates the content of one group from another.
Optional Properties of the Grouped ListView:
order: The order parameter sets the order in which the grouped list is displayed.
sort: The sort Parameter defines a bool that passes the data to be sorted by the widget.
Demo Module:
In this application demo module video, you will see that there is a list on the screen which contains some items and that item is separated.
Implementation :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
grouped_list: ^3.7.1Step 2: import the package :
import 'package:grouped_list/grouped_list.dart';
Step 3: Run flutter package get
Code Implementation
You need to implement it in your code respectively:
Create a new dart file called group_listview_demo.dart inside the libfolder.
In this screen, we have created a list with the help of grouped list view package, in which there are different groups which have been separated from the header and given their title in the header. Let us understand this with the help of a reference.
GroupedListView<dynamic, String>(
elements: _elements,
groupBy: (element) => element['group'],
groupComparator: (value1,
value2) => value2.compareTo(value1),
itemComparator: (item1, item2) =>
item1['topicName'].compareTo(item2['topicName']),
order: GroupedListOrder.DESC,
// useStickyGroupSeparators: true,
groupSeparatorBuilder: (String value) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 18,
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: Icon(Icons.account_circle),
title: Text(
element['topicName'],
style: TextStyle(fontSize: 16),
),
),
),
);
},
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:group_listview_demo/traction_group_seprator.dart';
import 'package:grouped_list/grouped_list.dart';
class GroupListViewDemo extends StatefulWidget {
@override
_GroupListViewDemoState createState() => _GroupListViewDemoState();
}
class _GroupListViewDemoState extends State<GroupListViewDemo> {
List _elements = [
{'topicName': 'GridView.count', 'group': 'GridView Type'},
{'topicName': 'GridView.builder', 'group': 'GridView Type'},
{'topicName': 'GridView.custom', 'group': 'GridView Type'},
{'topicName': 'GridView.extent', 'group': 'GridView Type'},
{'topicName': 'ListView.builder', 'group': 'ListView Type'},
{'topicName': 'StatefulWidget', 'group': 'Type of Widget'},
{'topicName': 'ListView', 'group': 'ListView Type'},
{'topicName': 'ListView.separated', 'group': 'ListView Type'},
{'topicName': 'ListView.custom', 'group': 'ListView Type'},
{'topicName': 'StatelessWidget', 'group': 'Type of Widget'},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Grouped ListView'),
),
body: GroupedListView<dynamic, String>(
elements: _elements,
groupBy: (element) => element['group'],
groupComparator: (value1,
value2) => value2.compareTo(value1),
itemComparator: (item1, item2) =>
item1['topicName'].compareTo(item2['topicName']),
order: GroupedListOrder.DESC,
// useStickyGroupSeparators: true,
groupSeparatorBuilder: (String value) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 18,
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: Icon(Icons.account_circle),
title: Text(
element['topicName'],
style: TextStyle(fontSize: 16),
),
),
),
);
},
),
);
}
}
Conclusion:
In this article, I have explained a Grouped ListView in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Grouped ListView demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Grouped ListView in your flutter project. We will show you the Grouped ListView is?, and working on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
