Exception when used inside SliverChildListDelegate

[leonardo2204]

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!

[leonardo2204]

I was able to reproduce the issue here.
Removing the Expanded root widget from the library and adding shrinkWrap to true solved it!
The question is, does it make sense to have the Expanded widget here? I mean, shouldn`t it be a final user implementation choice to avoid this kind of conflict?

Thanks again!

[sergeatoma]

Same here. Any possible solution for use groupedlistview inside SliverChildListDelegate without shrinkWrap?

[leonardo2204]

I don't think so, without either Expanded or shrinkWrap it won't work...

[Dimibe]

@leonardo2204 Thanks for your issue.
The Expanded Widget is needed in case the sticky group headers are being used. I'am currently reworking the sticky headers. I will do my best to avoid the expanded widget in the reworked version.
I'll let you know when the new version is available.

[leonardo2204]

Thank you very much! Let me know if you need any help!

[allanwolski]

Thanks for the lib, @Dimibe
I also need this to use the GroupedListView inside a Column.

[ThomasValois]

Having the same issue here. Happy to hear it's being worked on! @leonardo2204 thanks for your initial fix on it

[Dimibe]

@leonardo2204 @ThomasValois Version 3.0.0 was just released. There the issue should been fixed. Let me know if anything does not work as expected.
@allanwolski Should be also working inside a column now like the standard ListView.