flutterdartlisttilegrouped-list

Seperate flutter groupedlist group with divider


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
            );

Solution

  • 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)