I tried upgrading form 2.31 to 3.0. After the upgrade the parent widget where I have GroupedListView gets rebuilt every time I scroll the list view. In other words the widget including GroupedListView is rebuilt repeatedly unnecessarily. This makes the list very slow. Issue gets fixed if I revert to 2.3.1. Any ideas what could be wrong?

Simplified build method where the problem occurs:

  @override
  Widget build(BuildContext context) {
     return ChangeNotifierProvider<ItemsViewModel>.value(
        value: _items,
        child: Consumer<ItemsViewModel>(
            builder: (context, viewModel, _) {
            return GroupedListView(elements: viewModels.items,...);
          }
...

Hi, first of all thank you for creating a great & useful package. I wanted to ask - is there a way to order the groups by a custom (and not alphabetical) order? Thank you!

Hi I am looking to sort the elements by the days in the week instead of just ASC and DESC. I tried to edit from the original sort for ASC. These are the edits I have made to the grouped_list.dart file, but the app still remains to retain the original ASC sorting properties. Am I missing a step?

class LongListPage extends StatefulWidget {
  @override
  _LongListPageState createState() => _LongListPageState();
}

class _LongListPageState extends State<LongListPage> {
  List<Map<String, int>> _elements = List<Map<String, int>>.generate(
      30, (int index) => {'name': index, 'isEven': index % 2 == 0 ? 0 : 1});

  List<Map<String, int>> _filterElements = [];

  @override
  void initState() {
    _filterElements = _elements;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextButton(
            onPressed: () {
              setState(() {
                _filterElements = _elements.where(
                  (element) {
                    return element['name'] % 2 == 0;
                  },
                ).toList();
              });
            },
            child: Text('only even'),
          ),
          Expanded(
            child: GroupedListView<Map<String, int>, int>(
              elements: _filterElements,
              groupBy: (element) => element['isEven'],
              separator: Divider(),
              groupComparator: (value1, value2) {
                return value1.compareTo(value2);
              },
              useStickyGroupSeparators: true,
              groupSeparatorBuilder: (value) {
                return Text(
                  value.toString(),
                  style: TextStyle(
                    backgroundColor: Colors.red,
                  ),
                );
              },
              itemBuilder: (context, element) {
                return Text(element['name'].toString());
              },
            ),
          ),
        ],
      ),
    );
  }
}

When I scroll to the bottom of the list and then I try to filter the list content by pressing the "only even" button I get:

RangeError (index): Invalid value: Not in inclusive range 0..14: 16 The relevant error-causing widget was GroupedListView<Map<String, int>, int>

Based on incoming FCM messages i need to automatically scroll to a certain list element position based on the element's id (not index) it has in its data model. How can this be achieved with a GroupedListView?

Hello,

I just updated my app with the latest version of the library and my grouped list is behaving strange.

I noticed that if I don't add the floatingHeader param to false, then I get only the first groupSeparator item and the rest of the list is not visible.

If I add the floatingHeader param to true then I get all the items of the grouped list with a sticky groupSeparator item which somehow has a transparent background. What am I doing wrong?

And since I opened this thread I have a small question. I group my list after date but I would like to order it after date and time is that possible somehow?

Thank you in advance.

I have an issue when displaying a list with contacts names in Hebrew, the value inside the sticky group separator gets kind of stuck and not displaying the correct value.

Example:

• The first letter of the names in the list is in the right.

Hello, thanks for the lib!

I'm having issues using GroupedListView inside a SliverChildListDelegate. Before, I was using ListView.separated and it was working properly.

Some snippets to help:

BEFORE: (working)

 @override
  Widget build(BuildContext context) {
    return BlocBuilder<EventBloc, EventState>(
      bloc: BlocProvider.of(context),
      builder: (BuildContext context, EventState state){
        if(state is EventLoading){
          return Column(children: [
            CircularProgressIndicator()
          ]);
        }else if(state is EventEmpty){
          return Column(
            children: <Widget>[
              Text('No results :('),
            ],
          );
        }else if(state is EventLoaded){
          return ListView.separated(
              controller: scrollController,
              shrinkWrap: true,
              separatorBuilder: (context, index) {
                return Divider();
              },
              itemCount: state.hasMore ? state.event.length + 1 : state.event.length,
              itemBuilder: (BuildContext context, int index) {
                if(index >= state.event.length){
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(bottom: 12),
                        child: RaisedButton(
                          child: Text('Load More...'),
                          onPressed: (){
                            eventBloc.add(LoadMoreEvent());
                          },
                        ),
                      ),
                    ],
                  );
                } else {
                  return ConferenceItem(event: state.event[index]);
                }
              });
        }else{
          return Container();
        }
      },
    );

AFTER (not working):

@override
  Widget build(BuildContext context) {
    return BlocBuilder<EventBloc, EventState>(
      bloc: BlocProvider.of(context),
      builder: (BuildContext context, EventState state){
        if(state is EventLoading){
          return Align(
              child: CircularProgressIndicator()
          );
        }else if(state is EventEmpty){
          return Column(
            children: <Widget>[
              Text('No results :('),
            ],
          );
        }else if(state is EventLoaded){
          return GroupedListView<Event, String>(
              separator: Divider(),
              elements: state.event,
//              itemCount: state.hasMore ? state.event.length + 1 : state.event.length,
              indexedItemBuilder: (BuildContext context, Event event, int index) {
                if(index >= state.event.length){
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(bottom: 12),
                        child: RaisedButton(
                          child: Text('Load More...'),
                          onPressed: (){
                            eventBloc.add(LoadMoreEvent());
                          },
                        ),
                      ),
                    ],
                  );
                } else {
                  return ConferenceItem(event: event);
                }
              },
              groupSeparatorBuilder: (value) {
                return Text('teste');
              },
              groupBy: (Event element) {
                return element.country;
              });
        }else{
          return Container();
        }
      },
    );
  }

The parent component (which contains the ListView):

SliverList(
               delegate: SliverChildListDelegate([
                 Padding(
                   padding: const EdgeInsets.only(top: 16.0),
                   child: SearchBody(), <---- THIS IS THE ListView/GroupListView component
                 ),
               ])
           )

The exception I'm facing is the following:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

If this message did not help you determine the problem, consider using debugDumpRenderTree():
  https://flutter.dev/debugging/#rendering-layer
  http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is: RenderFlex#acbea relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
...  child 1: RenderLimitedBox#a815b relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...    size: Size(411.4, 0.0)
...    maxWidth: 0.0
...    maxHeight: 0.0
...    child: RenderConstrainedBox#eb095 relayoutBoundary=up7 NEEDS-PAINT
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, h=0.0)
...      size: Size(411.4, 0.0)
...      additionalConstraints: BoxConstraints(biggest)
...  child 2: RenderRepaintBoundary#8e0c8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    usefulness ratio: no metrics collected yet (never painted)
...    child: RenderCustomPaint#342ca NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      child: RenderRepaintBoundary#bc4ab NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        needs compositing
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        usefulness ratio: no metrics collected yet (never painted)
...        child: _RenderScrollSemantics#17174 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          semantic boundary
...          size: MISSING
The creator information is set to: Column-[GlobalKey#e959e] ← GroupedListView<Event, String> ← BlocBuilder<EventBloc, EventState> ← SearchBody ← Padding ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← ⋯

See also: https://flutter.dev/layout/

If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was: 
  GroupedListView<Event, String> file:///Users/leonardo2204/project/flutter/confs_tech/lib/widgets/body.dart:57:18
When the exception was thrown, this was the stack: 
#0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:691:11)
#1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:718:10)
#2      RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7)
#3      RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:206:11)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7)
...
The following RenderObject was being processed when the exception was fired: RenderFlex#acbea relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
...  size: MISSING
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
RenderObject: RenderFlex#acbea relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
...  child 1: RenderLimitedBox#a815b relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...    size: Size(411.4, 0.0)
...    maxWidth: 0.0
...    maxHeight: 0.0
...    child: RenderConstrainedBox#eb095 relayoutBoundary=up7 NEEDS-PAINT
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, h=0.0)
...      size: Size(411.4, 0.0)
...      additionalConstraints: BoxConstraints(biggest)
...  child 2: RenderRepaintBoundary#8e0c8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    usefulness ratio: no metrics collected yet (never painted)
...    child: RenderCustomPaint#342ca NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      child: RenderRepaintBoundary#bc4ab NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        needs compositing
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        usefulness ratio: no metrics collected yet (never painted)
...        child: _RenderScrollSemantics#17174 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          semantic boundary
...          size: MISSING
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#acbea relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Padding file:///Users/leonardo2204/project/flutter/confs_tech/lib/bloc/home_page.dart:38:19
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
The relevant error-causing widget was: 
  GroupedListView<Event, String> file:///Users/leonardo2204/project/flutter/confs_tech/lib/widgets/body.dart:57:18
════════════════════════════════════════════════════════════════════════════════════════════════════

For what it is worth, the code is open source: https://github.com/leonardo2204/confstech-flutter/blob/master/lib/widgets/body.dart#L40

I'm suspecting this may be related to the Expanded widget wrapping the ListView, but I'm not 100% sure, I'll dig further.

Thanks again!

Hi,

My code was runnning ok with previous versión of 4.0.0. After upgrading I lost scending ordenring of the groups. Items still ordenring descending but not the groups. If I only order by MMM yyyy is ok but if I order by dd MMMM yyyy then the groups order does not work. I have tryied differents combination with comparator but not succeed.

GroupedListView(
                      key: const Key('changeLogGroupedList'),
                      elements: logItems,
                      floatingHeader: true,
                      addAutomaticKeepAlives: true,
                      useStickyGroupSeparators: true,
                      groupBy: (dynamic logItem) => DateFormat('dd MMMM yyyy')
                          .format(logItem.createdAt.toDate()),
                      groupComparator: (value1, value2) =>
                          value2.compareTo(value1),
                      itemComparator: (item1, item2) =>
                          item1.createdAt.compareTo(item2.createdAt),
                      order: GroupedListOrder.DESC,
                      groupSeparatorBuilder: (dynamic logItem) => SizedBox(

`

class record{

  String Name;
  int DayofBirth;

  record(String Name, int DayofBirth){
    Name=this.Name;
    DayofBirth=this.DayofBirth;
  }

}

Now I want the following list

 var lists=[

    record("Ashu",DateTime.thursday),
    record("Aniket",DateTime.monday),
    record("Eishu",DateTime.saturday),
    record("Keshav",DateTime.thursday),


  ];

` Into the grouped list according to DayofBirth

This is my GroupListView `

GroupedListView<dynamic,record>(
                elements: lists,
                groupBy: (element)=>element.DayofBirth,
                groupSeparatorBuilder: _buildSperator,
                itemBuilder: (context, element) => Text(element.Name),
                order: GroupedListOrder.ASC,
              ),
Widget _buildSperator(dynamic groupByValue){
  return Text(groupByValue);

}

`

This change will fix the error when using Flutter 3.0,

: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null. ../…/lib/grouped_list.dart:264

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../flutter/packages/flutter/lib/src/widgets/binding.dart'). package:flutter/…/widgets/binding.dart:1 WidgetsBinding.instance!.addPostFrameCallback((_) {

The key of GroupedListView is also used as the key for child ListView, which leads to an exception. I removed the duplication of key usage in ListView.

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe the bug When setting theme to dark mode, the group separator background color remains at white, and this makes the text almost impossible to read. I should mention this is with useStickyGroupSeparators = true. The issue is with the sticky group separator .

Expected behavior When setting theme to dark mode, the sticky group separator background color should be the same as the dark mode theme background color (or transparent)

Information:

• Dart version: 2.18.4
• Flutter version: 3.3.8
• Platform: Android
• Package version: 5.1.2

when _sortedElements is empty throw RangeError.

The following RangeError was thrown during a scheduler callback: RangeError (index): Invalid value: Valid value range is empty: 0

When the exception was thrown, this was the stack: #0 List.[] (dart:core-patch/growable_array.dart:264:36) #1 _GroupedListViewState._scrollListener (package:grouped_list/grouped_list.dart:366:48) #2 _GroupedListViewState.build. (package:grouped_list/grouped_list.dart:272:9) #3 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15) #4 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:9) #5 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1015:5) #6 _invoke (dart:ui/hooks.dart:148:13) #7 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:318:5)