I am making use of the grouped_list flutter package to build a notification screen which groups the notifications depending on the days. I am seeking a solution where i can seperate each of the groups(which are the days in this context) with a divider.
I have tried to make my itemBuilder a column and put my listitem and divider as children but this just places the divider under each of my ListTile item instead of placing the divider under each group of ListTile item.
For context this is what my code looks like:
GroupedListView<dynamic, String>(
padding: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 40.0),
elements: _elements,
groupBy: (element) => element['day'],
groupHeaderBuilder: createGroupHeader,
// groupSeparatorBuilder: (String groupByValue) => Align(
// alignment: AlignmentDirectional.centerStart,
// child: Padding(
// padding: const EdgeInsets.only(bottom: 16.0),
// child: Text(
// groupByValue,
// style: CredioTextStyle.regular.copyWith(
// fontSize: 12.0,
// color: Colors.black.withOpacity(0.5),
// letterSpacing: 0.05,
// ),
// ),
// ),
// ),
itemBuilder: (context, dynamic element) => ListItem(
// notifications: task.data!.,
time: element['time'],
title: element['notification'],
),
itemComparator: (item1, item2) =>
item1['notification'].compareTo(item2['notification']),
groupComparator: (item1, item2) =>
item1[1].compareTo(item2[1]),
// optional
useStickyGroupSeparators: false,
floatingHeader: true,
// optional
order: GroupedListOrder.DESC, // optional
);
You can add the Divider
to your groupSeperatorBuilder
/ groupHeaderBuilder
. Just don't paint one in front of the first element (for example by checking the index or comparing the name)