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!