I want to add Column widget to Row widget.
I have a data structure as follows:
Scaffold
- Padding
- SingleChildScrollView
- Column
- Row
- CircleAvatar
- Column (The Column I am talking about below)
- Text
- Row
- Expanded
- MaterialButton
- Expanded
- Container
- Expanded
- MaterialButton
- ListTile
When adding a Column to a Row, I get an error:
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal 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 horizontal 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#acbae relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: MISSING
direction: horizontal
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
child 1: RenderConstrainedBox#404ec NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=3; fit=FlexFit.tight
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(w=180.0, h=50.0)
child: RenderSemanticsAnnotations#4f838 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
semantic boundary
size: MISSING
child: _RenderInputPadding#04251 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
child: RenderConstrainedBox#3337d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(88.0<=w<=Infinity, 36.0<=h<=Infinity)
child 2: RenderLimitedBox#593aa NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
constraints: MISSING
size: MISSING
maxWidth: 0.0
maxHeight: 0.0
child: RenderConstrainedBox#d1172 NEEDS-LAYOUT NEEDS-PAINT
parentData: <none>
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(biggest)
child 3: RenderConstrainedBox#42764 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=3; fit=FlexFit.tight
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(w=180.0, h=50.0)
child: RenderSemanticsAnnotations#7ec96 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
semantic boundary
size: MISSING
child: _RenderInputPadding#6aa1f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
child: RenderConstrainedBox#e1f60 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(88.0<=w<=Infinity, 36.0<=h<=Infinity)
The creator information is set to: Row ← Column ← Row ← Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#10aed] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#23575] ← Listener ← _ScrollableScope ← ⋯
The nearest ancestor providing an unbounded width constraint is: RenderFlex#ede32 relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
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=2_bug.md
The relevant error-causing widget was
Row
When the exception was thrown, this was the stack
#0 RenderFlex.performLayout.<anonymous closure>
#1 RenderFlex.performLayout
#2 RenderObject.layout
#3 RenderBox.layout
#4 ChildLayoutHelper.layoutChild
#5 RenderFlex._computeSizes
#6 RenderFlex.performLayout
#7 RenderObject.layout
#8 RenderBox.layout
#9 ChildLayoutHelper.layoutChild
#10 RenderFlex._computeSizes
#11 RenderFlex.performLayout
#12 RenderObject.layout
#13 RenderBox.layout
#14 ChildLayoutHelper.layoutChild
#15 RenderFlex._computeSizes
#16 RenderFlex.performLayout
#17 RenderObject.layout
#18 RenderBox.layout
#19 _RenderSingleChildViewport.performLayout
#20 RenderObject.layout
#21 RenderBox.layout
#22 RenderProxyBoxMixin.performLayout
#23 RenderObject.layout
#24 RenderBox.layout
#25 RenderProxyBoxMixin.performLayout
#26 RenderObject.layout
#27 RenderBox.layout
#28 RenderProxyBoxMixin.performLayout
#29 RenderObject.layout
#30 RenderBox.layout
#31 RenderProxyBoxMixin.performLayout
#32 RenderObject.layout
#33 RenderBox.layout
#34 RenderProxyBoxMixin.performLayout
#35 RenderObject.layout
#36 RenderBox.layout
#37 RenderProxyBoxMixin.performLayout
#38 RenderObject.layout
#39 RenderBox.layout
#40 RenderProxyBoxMixin.performLayout
#41 RenderObject.layout
#42 RenderBox.layout
#43 RenderProxyBoxMixin.performLayout
#44 RenderCustomPaint.performLayout
#45 RenderObject.layout
#46 RenderBox.layout
#47 RenderProxyBoxMixin.performLayout
#48 RenderObject.layout
#49 RenderBox.layout
#50 RenderPadding.performLayout
#51 RenderObject.layout
#52 RenderBox.layout
#53 MultiChildLayoutDelegate.layoutChild
#54 _ScaffoldLayout.performLayout
#55 MultiChildLayoutDelegate._callPerformLayout
#56 RenderCustomMultiChildLayoutBox.performLayout
#57 RenderObject._layoutWithoutResize
#58 PipelineOwner.flushLayout
#59 RendererBinding.drawFrame
#60 WidgetsBinding.drawFrame
#61 RendererBinding._handlePersistentFrameCallback
#62 SchedulerBinding._invokeFrameCallback
#63 SchedulerBinding.handleDrawFrame
#64 SchedulerBinding._handleDrawFrame
#68 _invoke (dart:ui/hooks.dart:150:10)
#69 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:318:5)
#70 _drawFrame (dart:ui/hooks.dart:115:31)
(elided 3 frames from dart:async)
The following RenderObject was being processed when the exception was fired: RenderFlex#acbae relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderFlex#acbae relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: MISSING
direction: horizontal
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
child 1: RenderConstrainedBox#404ec NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=3; fit=FlexFit.tight
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(w=180.0, h=50.0)
child: RenderSemanticsAnnotations#4f838 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
semantic boundary
size: MISSING
child: _RenderInputPadding#04251 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
child: RenderConstrainedBox#3337d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(88.0<=w<=Infinity, 36.0<=h<=Infinity)
child 2: RenderLimitedBox#593aa NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
constraints: MISSING
size: MISSING
maxWidth: 0.0
maxHeight: 0.0
child: RenderConstrainedBox#d1172 NEEDS-LAYOUT NEEDS-PAINT
parentData: <none>
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(biggest)
child 3: RenderConstrainedBox#42764 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=3; fit=FlexFit.tight
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(w=180.0, h=50.0)
child: RenderSemanticsAnnotations#7ec96 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
semantic boundary
size: MISSING
child: _RenderInputPadding#6aa1f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
child: RenderConstrainedBox#e1f60 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
additionalConstraints: BoxConstraints(88.0<=w<=Infinity, 36.0<=h<=Infinity)
════════════════════════════════════════════════════════════════════════════════
…
My code:
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
),
Column(
children: [
Text(userName),
Row(
children: …,
),
],
),
],
),
Feel free to leave a comment if you need more information.
How to add Column widget to Row widget? I would appreciate any help. Thank you in advance!
If the children inside the Row inside the Column can be Expanded, then consider wrapping the Column in an Expanded like so:
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
),
Expanded(
child: Column(
children: [
Text(userName),
Row(
children: …,
),
],
),
)
],
),
Related
Maybe one of you already came across these problems. I spent numerous hours with trying to get the ListView (I also tried ExpansionPanelList) into a container that pans from the right edge into the screen (help menu) over the existing widgets. I have already created a mock-up starting with a basic ListView and then added feature by feature again. But now I am stuck and the error message is not of much help (to me).
Those exceptions are thrown as soon as I add the AnimatedPositioned. The main message seems to be an issue with constraints.hasBoundedWidth': is not true.
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1754 pos 16: 'constraints.hasBoundedWidth': is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was:
ListView file:///Users/holger/IdeaProjects/math/lib/tmp.dart:496:40
When the exception was thrown, this was the stack:
#2 RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1754:16)
#3 RenderObject.layout (package:flutter/src/rendering/object.dart:1775:7)
#4 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:13)
#5 RenderObject.layout (package:flutter/src/rendering/object.dart:1775:7)
#6 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:13)
...
The following RenderObject was being processed when the exception was fired: RenderShrinkWrappingViewport#a1875 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
... size: MISSING
... axisDirection: down
... crossAxisDirection: right
... offset: ScrollPositionWithSingleContext#20c01(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#3e990, ScrollDirection.idle)
RenderObject: RenderShrinkWrappingViewport#a1875 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
size: MISSING
axisDirection: down
crossAxisDirection: right
offset: ScrollPositionWithSingleContext#20c01(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#3e990, ScrollDirection.idle)
... child 0: RenderSliverPadding#078d5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... parentData: layoutOffset=None
... constraints: MISSING
... geometry: null
... padding: EdgeInsets.zero
... textDirection: ltr
... child: RenderSliverList#fd0a6 NEEDS-LAYOUT NEEDS-PAINT
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... geometry: null
... no children current live
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderShrinkWrappingViewport#a1875 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1713 pos 12: 'hasSize'
The relevant error-causing widget was:
ListView file:///Users/holger/IdeaProjects/math/lib/tmp.dart:496:40
The lower part of the exception message is repeated multiple times, maybe once for every animation step. Then the messages finish with those below, where the reference container is the one of AnimatedPositiones > IgnorePointer > Container
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
RenderBox was not laid out: RenderDecoratedBox#a83d8
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1713 pos 12: 'hasSize'
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was:
Container file:///Users/holger/IdeaProjects/math/lib/tmp3.dart:474:32
When the exception was thrown, this was the stack:
#2 RenderBox.size (package:flutter/src/rendering/box.dart:1713:12)
#3 RenderDecoratedBox.paint (package:flutter/src/rendering/proxy_box.dart:2067:12)
#4 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2307:7)
#5 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:191:13)
#6 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:133:15)
...
The following RenderObject was being processed when the exception was fired: RenderDecoratedBox#a83d8
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(w=331.2, h=716.8)
... size: MISSING
... decoration: BoxDecoration
... color: Color(0xffffffff)
... configuration: ImageConfiguration(bundle: PlatformAssetBundle#b6597(), devicePixelRatio: 3.0, locale: en_US, textDirection: TextDirection.ltr, platform: iOS)
RenderObject: RenderDecoratedBox#a83d8
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=331.2, h=716.8)
size: MISSING
decoration: BoxDecoration
color: Color(0xffffffff)
configuration: ImageConfiguration(bundle: PlatformAssetBundle#b6597(), devicePixelRatio: 3.0, locale: en_US, textDirection: TextDirection.ltr, platform: iOS)
... child: RenderFlex#28045 NEEDS-PAINT
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(w=331.2, h=716.8)
... size: MISSING
... direction: horizontal
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
... textBaseline: alphabetic
... child 1: RenderPadding#b537d relayoutBoundary=up1 NEEDS-PAINT
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
... constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
... size: Size(59.0, 716.8)
... padding: EdgeInsets(3.0, 0.0, 0.0, 0.0)
... textDirection: ltr
... child: RenderFlex#4c2a2 relayoutBoundary=up2 NEEDS-PAINT
... parentData: offset=Offset(3.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
... size: Size(56.0, 716.8)
... direction: vertical
... mainAxisAlignment: spaceEvenly
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
... child 1: RenderSemanticsGestureHandler#c07e2 relayoutBoundary=up3 NEEDS-PAINT
... parentData: offset=Offset(0.0, 330.4); flex=null; fit=null (can use size)
... constraints: BoxConstraints(unconstrained)
... size: Size(56.0, 56.0)
... gestures: tap
... child 2: _RenderScrollSemantics#80100 relayoutBoundary=up1 NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
... constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
... semantic boundary
... size: MISSING
... child: RenderPointerListener#695c7 relayoutBoundary=up2 NEEDS-PAINT
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
... size: MISSING
... behavior: deferToChild
... listeners: signal
... child: RenderSemanticsGestureHandler#db442 relayoutBoundary=up3 NEEDS-PAINT
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
... size: MISSING
... gestures: <none>
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderDecoratedBox#a83d8
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1713 pos 12: 'hasSize'
The relevant error-causing widget was:
Container file:///Users/holger/IdeaProjects/math/lib/tmp3.dart:474:32
The ListView looks like this, it shows headers of different tags and each can be expanded to show detail information.
AnimatedPositioned(duration: Duration(milliseconds: 800),
left: _drawerLeft,
top:5,
child: IgnorePointer(ignoring: (_drawerLeft <= MediaQuery.of(context).size.width / 3 ? false:true),
child: Container(
height:0.8*1 * MediaQuery.of(context).size.height, width:0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CupertinoButton(
child: Icon(fwdBtn),
onPressed: () {
setState(() {
_drawerLeft = 1 * MediaQuery.of(context).size.width;
controller.reverse();
});
},
),
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: usedTagData.length, itemBuilder: (BuildContext context, int index) {
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(usedTagData[index].header, style: TextStyle(color: CupertinoColors.link)),
CupertinoButton(
child: Icon(dwnBtn),
onPressed: () {
setState(() {
usedTagData[index].isExpanded = !usedTagData[index].isExpanded;
});
},
),
],
),
(usedTagData[index].isExpanded ?
Text(usedTagData[index].content)
:
Container()
),
]
);
}
),
],
),
)),
)
The AnimatedPositioned is a widget of
return Container(
height: MediaQuery.of(context).size.height,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Do you have any idea how to go forward on this or do the exception messages provide any hint to you?
The only way you would get ListView to work with Row is to set a predefined width. Your ListView tries to expand infinitely so you should constrain it by setting a predefined width.
Here is an example:
Row(
children:[
SizedBox(
width:200,
child:ListView()
),
]),
I am trying to replace flutter's red screen with my own screen( a loading screen). But the app crashes when it is triggered. Here is how I am replacing the screen
ErrorWidget.builder = (FlutterErrorDetails details) => Scaffold(
appBar: AppBar(
title: Text("Loading"),
),
body: Positioned(
child:Loading()
),
);
And the loading widget is
Container(
child: Center(
child: SpinKitFadingCube(
color: Colors.white,
size: 50.0,
)
),
color: Colors.white.withOpacity(0.8),
);
The stacktrace is
'package:flutter/src/widgets/framework.dart': Failed assertion: line 4952 pos 16: 'child is! ParentDataElement<ParentData>': is not true.
The relevant error-causing widget was:
Scaffold file:///C:/Users/Hemant/AndroidStudioProjects/discountapp/lib/main.dart:10:58
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
Every child of a RenderCustomMultiChildLayoutBox must have an ID in its parent data.
The relevant error-causing widget was:
Scaffold file:///C:/Users/Hemant/AndroidStudioProjects/discountapp/lib/main.dart:10:58
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
Every child of a RenderCustomMultiChildLayoutBox must have an ID in its parent data.
The following child has no ID: _RenderColoredBox#1154c NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=null
... constraints: MISSING
... size: MISSING
... behavior: opaque
The relevant error-causing widget was:
Scaffold file:///C:/Users/Hemant/AndroidStudioProjects/discountapp/lib/main.dart:10:58
When the exception was thrown, this was the stack:
#0 MultiChildLayoutDelegate._callPerformLayout.<anonymous closure> (package:flutter/src/rendering/custom_layout.dart:228:13)
#1 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:234:10)
#2 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:401:14)
#3 RenderObject.layout (package:flutter/src/rendering/object.dart:1776:7)
#4 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:13)
...
The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#ea7eb relayoutBoundary=up6
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=646.8)
... size: Size(392.7, 646.8)
RenderObject: RenderCustomMultiChildLayoutBox#ea7eb relayoutBoundary=up6
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=646.8)
size: Size(392.7, 646.8)
... child 1: _RenderColoredBox#1154c NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=null
... constraints: MISSING
... size: MISSING
... behavior: opaque
... child: RenderPositionedBox#4cf2c NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... alignment: center
... textDirection: ltr
... widthFactor: expand
... heightFactor: expand
... child: RenderPositionedBox#79ddb NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0)
... constraints: MISSING
... size: MISSING
... alignment: center
... textDirection: ltr
... widthFactor: expand
... heightFactor: expand
... child: RenderConstrainedBox#ba168 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0)
... constraints: MISSING
... size: MISSING
... additionalConstraints: BoxConstraints(w=50.0, h=50.0)
... child 2: RenderConstrainedBox#26ec0 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.appBar
... constraints: MISSING
... size: MISSING
... additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=56.0)
... child: RenderSemanticsAnnotations#95f4f NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... semantic boundary
... size: MISSING
... child: RenderAnnotatedRegion<SystemUiOverlayStyle>#5aedc NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... child: RenderPhysicalModel#177a3 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... elevation: 4.0
... color: MaterialColor(primary value: Color(0xff2196f3))
... shadowColor: MaterialColor(primary value: Color(0xff2196f3))
... shape: BoxShape.rectangle
... borderRadius: BorderRadius.zero
... child 3: RenderStack#c7c1d NEEDS-LAYOUT NEEDS-PAINT
... parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.floatingActionButton
... constraints: MISSING
... size: MISSING
... alignment: centerRight
... textDirection: ltr
... fit: loose
... child 1: RenderTransform#9b142 NEEDS-LAYOUT NEEDS-PAINT
... parentData: not positioned; offset=Offset(0.0, 0.0)
... constraints: MISSING
... size: MISSING
... transform matrix: [0] 0.0,0.0,0.0,0.0
[1] 0.0,0.0,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
... origin: null
... alignment: center
... textDirection: ltr
... transformHitTests: true
... child: RenderTransform#9f5b2 NEEDS-LAYOUT NEEDS-PAINT
... parentData: <none>
... constraints: MISSING
... size: MISSING
... transform matrix: [0] 0.7,0.7,0.0,0.0
[1] -0.7,0.7,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
... origin: null
... alignment: center
... textDirection: ltr
... transformHitTests: true
════════════════════════════════════════════════════════════════════════════════════════════════════
W/libEGL (22033): EGLNativeWindowType 0x7019d6f010 disconnect failed
I have tried replacing the loading screen with a simple Text Widget. Same Thing happens. I found out how to do this from another stackoverflow post. Any help will be appreciated
Things you can try,
Wrap the Positioned() Widget with a stack.
Provide width and height constraints to Container
Stack(
children: [
Positioned(top: 10,child: Loading(.....))
],
),
Not sure why you need positioning Widget but, above is the way to go.
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(
child: SpinKitFadingCube(
color: Colors.white,
size: 50.0,
)
),
color: Colors.white.withOpacity(0.8),
);
And this is how you should have it constrained(Example).
import 'package:flutter/material.dart';
void main() {
runApp(StackApp());
}
Simple Class Stack I am trying to use the stack to overlay rectangles one above the other
class StackApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
);
}
}
I am getting this error message
I/flutter ( 8912): (elided 10 frames from class _AssertionError, package dart:async, and package dart:async-patch)
I/flutter ( 8912):
I/flutter ( 8912): The following RenderObject was being processed when the exception was fired:
RenderStack#322e9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter ( 8912): creator: Stack ← StackApp ← [root]
I/flutter ( 8912): parentData:
I/flutter ( 8912): constraints: BoxConstraints(w=411.4, h=866.3)
I/flutter ( 8912): size: MISSING
I/flutter ( 8912): alignment: AlignmentDirectional.topStart
I/flutter ( 8912): textDirection: null
I/flutter ( 8912): fit: loose
I/flutter ( 8912): overflow: clip
I/flutter ( 8912): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 8912): child 1: RenderConstrainedBox#49f71 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 8912): child: RenderDecoratedBox#2c55a NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8912): child 2: RenderConstrainedBox#c71ea NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 8912): child: RenderDecoratedBox#4ad6c NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8912): child 3: RenderConstrainedBox#5304a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 8912): child: RenderDecoratedBox#9516e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8912):
════════════════════════════════════════════════════════════════════════════════════════════════════
You need to wrap your app in a MaterialApp, CupertinoApp or WidgetsApp. This is almost mandatory. But if you don't want to use one of these for some reason, then set alignment in your Stack like alignment: Alignment.topLeft to fix this.
The code below works without using Row widget but it gives an error on using a nested list View with Row how can I use a Row if that's my Use Case in the above code I have one row inside which there are two columns
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add_circle),
iconSize: 50.0,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => AddMember(),
),
);
},
),
],
),
drawer: MainDrawer(),
body: Container(
decoration: BoxDecoration(
image: Background().buildBackgroundImage(),
),
child: ListView(
children: <Widget>[
Row(
children: <Widget>[
Column(
children: <Widget>[
Text("1"),
],
),
Column(
children: <Widget>[
Text("Hammad"),
ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Text("data");
},
itemCount: 100,
),
],
),
],
)
],
),
),
);
} }
The code gives the following error?
I/flutter ( 6704): RenderShrinkWrappingViewport#9e1c7 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 6704): creator: ShrinkWrappingViewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#aa619] ← Semantics ←
I/flutter ( 6704): Listener ← _GestureSemantics ←
I/flutter ( 6704): RawGestureDetector-[LabeledGlobalKey#dbe17] ←
I/flutter ( 6704): _ScrollSemantics-[GlobalKey#17359] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter ( 6704): NotificationListener ← ⋯
I/flutter ( 6704): parentData: (can use size)
I/flutter ( 6704): constraints: BoxConstraints(unconstrained)
I/flutter ( 6704): size: MISSING
I/flutter ( 6704): axisDirection: down
I/flutter ( 6704): crossAxisDirection: right
I/flutter ( 6704): offset: ScrollPositionWithSingleContext#d8d3b(offset: 0.0, range: null..null, viewport: null,
I/flutter ( 6704): ScrollableState, ClampingScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#ce116,
I/flutter ( 6704): ScrollDirection.idle)
I/flutter ( 6704): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 6704): RenderSliverPadding#a684d NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 6704): RenderSliverList#59143 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 6704): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderShrinkWrappingViewport#9e1c7 relayoutBoundary=up14 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#0105f relayoutBoundary=up13 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#cdf64 relayoutBoundary=up12 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#8301a relayoutBoundary=up11 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#89bf4 relayoutBoundary=up10 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#6bd35 relayoutBoundary=up9 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#417b1 relayoutBoundary=up8 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#97f18 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#df728 relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderFlex#44487 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: RenderBox was not laid out: RenderFlex#99d5f relayoutBoundary=up4 NEEDS-PAINT
I/flutter ( 6704): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 443 pos 12: 'child.hasSize': is not true.
I/flutter ( 6704): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 6704): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 6704): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
Wrap your Columns with Flexible Widget.
Flexible(
child: Column(
children: <Widget>[
Keep in mind, whenever you are working with either Row widget or Column widget, you have to give definite sizes (less than the total available space) to all other widgets, but if you are not sure about the sizes, then give definite sizes to all the widgets, which needs minimum size to look fine, and for the other widgets use Expanded widget.
Look at this code for idea
Row(
children: <Widget>[
Expanded(
//Widget that is long and can cause overflow
child: LongWidget(),
),
//Give definite Size to this widget
FixedSizedWidget()
],
),
ListView(
children: [
new SizedBox(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
],
),
),
],
)
I used the Sized Box and seems still got the error.
This is my widget tree:
SingleChildScrollView -> Column -> children
Performing hot reload... flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following assertion was thrown during performResize(): flutter: Vertical viewport was given unbounded height. flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation flutter: typically happens when a scrollable widget is nested inside another scrollable widget. flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because flutter: there will always be enough vertical space for the children. In this case, consider using a Column flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size flutter: the height of the viewport to the sum of the heights of its children. flutter: flutter: When the exception was thrown, this was the stack: flutter: #0 RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:944:15) flutter:
#1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:997:6) flutter: #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9) flutter: #3
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #5
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #7
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #9
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #11
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #13 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) flutter: #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #15 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11) flutter: #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #17 _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:479:13) flutter: #18 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #19
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #21
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #23
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #24 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #25
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #26 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #27
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #28 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #29 RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13) flutter: #30 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #31 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11) flutter: #32
_ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7) flutter: #33 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7) flutter: #34 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14) flutter: #35 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #36
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #37 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #38
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #39
_RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11) flutter: #40 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #41
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #42 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #43
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #45
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #46 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #47 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) flutter: #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #49
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #50 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #51
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #52 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #53
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #54 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #55
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #56 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #57
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #58 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #59
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #60 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2809:13) flutter: #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #62 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) flutter: #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #64
__RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #65 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #66
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #67 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #68
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #69 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #70
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #71 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #72
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #73 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #74
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #75 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #76 RenderView.performLayout (package:flutter/src/rendering/view.dart:125:13) flutter: #77 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7) flutter: #78 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18) flutter: #79
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19) flutter: #80
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13) flutter: #81
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) flutter: #82
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) flutter: #83
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) flutter: #84
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7) flutter:
#86 _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19) flutter: #87
_Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5) flutter: #88 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:165:12) flutter: (elided one frame from package dart:async) flutter: flutter: The following RenderObject was being processed when the exception was fired: flutter: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-PAINT flutter: creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#58446] ← Semantics ← Listener ← flutter: _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#efcf9] ← flutter: _ExcludableScrollSemantics-[GlobalKey#1ff3b] ← Scrollable ← ListView ← Column ← Padding ← ⋯ flutter: parentData: <none> (can use size) flutter: constraints: BoxConstraints(0.0<=w<=335.0,
0.0<=h<=Infinity) flutter: size: MISSING flutter: axisDirection: down flutter: crossAxisDirection: right flutter: offset: ScrollPositionWithSingleContext#05c53(offset: 0.0, range: null..null, viewport: null, flutter: ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#31dab, flutter: ScrollDirection.idle) flutter: anchor: 0.0 flutter: This RenderObject had the following descendants (showing up to depth 5): flutter: RenderSliverPadding#912f7 NEEDS-LAYOUT NEEDS-PAINT flutter: RenderSliverList#41182 NEEDS-LAYOUT NEEDS-PAINT flutter: RenderRepaintBoundary#8a6de NEEDS-LAYOUT NEEDS-PAINT flutter: RenderConstrainedBox#4bfc3 NEEDS-LAYOUT NEEDS-PAINT flutter:
_RenderExcludableScrollSemantics#0976e NEEDS-LAYOUT NEEDS-PAINT flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#a987c relayoutBoundary=up14 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#9bd09 relayoutBoundary=up13 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#12af7 relayoutBoundary=up12 NEEDS-PAINT Reloaded 1 of 493 libraries in 603ms. flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#27e1a relayoutBoundary=up11 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out:
_RenderExcludableScrollSemantics#85fc5 relayoutBoundary=up10 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#19bee relayoutBoundary=up9 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#e802a relayoutBoundary=up8 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#f73b8 relayoutBoundary=up6 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#610b2 relayoutBoundary=up5 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#cbdf9 relayoutBoundary=up4 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#37577 relayoutBoundary=up3 NEEDS-PAINT flutter: Another exception was thrown: 'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 pos 12: 'child.hasSize': is not true. flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-P
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.1 17B1003, locale en-HK)
[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.1)
[✓] Connected devices (3 available)
Try this code,
You can implement scrollable row in flutter using below code
and for scrollable column just change Column with Row
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Text('hi'),
Text('hi'),
Text('hi'),
]
)
)
Edit : The keyword new is optional in Dart 2
see the output here
You can use Expanded widget to wrap your listView.
Expanded widget tells the screen to allow as much as space the widget wants to take.
Or you can also write shrinkWrap:true in your ListView widget (works in a lot of cases).
try to set the following properties of your ListView
shrinkWrap: true,
physics: ClampingScrollPhysics(),
for me, most of the Unbound constraints and scrolling errors were solved.
A horizontal ListView will expand vertically to occupy the height of its parent. It happens to be that in this case the parent is a vertical ListView, which has infinite height. You need to constrain the height of your inner ListView.
Probably the simplest way to do that is through a SizedBox widget.
ListView(
children: [
SizedBox(
height: 300.0,
child: ListView(scrollDirection: Axis.horizontal, ...),
),
],
)
EDIT:
The problem is actually caused by the vertical ListView, because it is the child of a Column. The reason is similar as above, a ListView will expand to be the height of its parent and a Column has unbounded height.
This snippet displays the symptom.
Column(
children: <Widget>[
ListView(children: [Text("hi"), Text("hi"), Text("hi")]),
],
)
The solution in this case depends on your setup. You could wrap it around a SizedBox again. You could make the column items part of your ListView. Or you could also change the ListView for a Column.
Wrap the 'ListView' with an 'Expanded' widget.
new Expanded (
child: new ListView (
.....
)
)
You'll need to wrap your horizontal ListView inside SizedBox widget. Have a look at this sample code:
new SizedBox(
height: 72.0,
child: new ListView(
padding: const EdgeInsets.symmetric(vertical: 4.0),
children: listViewItems,
scrollDirection: Axis.horizontal,
),
),
So you can also do this:
Container(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
]
),
),
by wrapping your ListView in a Container Widget
You can try this one as well for horizontal and vertical scrolling.
return Scaffold(
body: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 200,
margin: EdgeInsets.all(20),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.grey,
width: 100,
height: 100,
margin: EdgeInsets.all(20),
);
},
),
);
},
),
);
The reason is you cant use a Listview inside a Listview in flutter so you have to make one of them to either column or row as per requirement .
new Listview(
children: <Widget>[
new SizedBox(
height:100.0,
child: new Row(
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
]
)
)
]
)
This would satisfy your requirement according to me .
This might seem like a lazy answer but have you tried doing a $ flutter clean?
When I run this using the standard boilerplate given when you open a new flutter project it runs just fine, using the same code that gave you issues.
I know this is an older question but hopefully someone finds this useful.
This is what I used;
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body:
_listView(),
);
}
ListView _listView() {
return new ListView(
children: [
new SizedBox(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
],
),
),
],
);
}
}
And this is what I got;