Expanded Listview inside a Column in Flutter - flutter

Question

I'm new to Flutter and I've been stuck here for a while now. I am trying to make a main screen in Flutter for web, but I keep getting this error every time I try to apply the expanded property to the listview widget.
This is the code, the error, and what I'm trying to get:
[What I'm trying to do]:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hotelmanager/optionsList.dart';
class MainScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MainScreenState();
}
}
class _MainScreenState extends State<MainScreen> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
color: Colors.white,
child: Column(
children: <Widget>[
/*LEFT SIDE MENU*/
Expanded(
flex: 2,
child: Column(
children: <Widget>[
ListView(
children: <Widget>[
Container(
color: Colors.red,
child: Text("RED"),
)
],
),
],
),
),
/*HORIZONTAL AND CENTRAL MENU*/
Expanded(
flex: 8,
child: Column(
children: <Widget>[
/*HORIZONTAL MENU-ROW*/
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ListView(
children: <Widget>[
Container(
color: Colors.indigoAccent,
child: Text("BLUE"),
)
],
),
],
),
),
/*MAIN MENU-ROW*/
Expanded(
flex: 8,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.green,
child: Text("GREEN"),
),
],
),
)
],
),
)
],
),
));
}
}
The error log:
Launching lib\main.dart on Chrome in debug mode...
Syncing files to device Chrome...
Debug service listening on ws://127.0.0.1:62280/NmOsZXmtIqE=
Debug service listening on ws://127.0.0.1:62280/NmOsZXmtIqE=
══╡ 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#f5e21 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← Column ← Align ← ConstrainedBox ← Container ← Center ← MainScreen ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← ⋯, parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size), constraints: BoxConstraints(0.0<=w<=929.0, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: center, verticalDirection: down)
The creator information is set to:
Column ← Column ← Align ← ConstrainedBox ← Container ← Center ← MainScreen ← _BodyBuilder ←
MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← ⋯
The nearest ancestor providing an unbounded width constraint is: RenderFlex#62f2b relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
creator: Column ← Align ← ConstrainedBox ← Container ← Center ← MainScreen ← _BodyBuilder ←
MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ←
DefaultTextStyle ← ⋯
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=929.0, 0.0<=h<=876.0)
size: MISSING
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
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:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:46:13
When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 196:49 throw_
package:flutter/src/rendering/flex.dart 693:11 <fn>
package:flutter/src/rendering/flex.dart 717:15 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/flex.dart 746:14 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/shifted_box.dart 394:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 265:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/shifted_box.dart 394:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/custom_layout.dart 171:10 layoutChild
package:flutter/src/material/scaffold.dart 484:7 performLayout
package:flutter/src/rendering/custom_layout.dart 240:7 [_callPerformLayout]
package:flutter/src/rendering/custom_layout.dart 399:14 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/proxy_box.dart 1247:11 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/proxy_box.dart 3224:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/widgets/overlay.dart 700:14 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/proxy_box.dart 110:13 performLayout
package:flutter/src/rendering/object.dart 1767:7 layout
package:flutter/src/rendering/view.dart 167:48 performLayout
package:flutter/src/rendering/object.dart 1630:7 [_layoutWithoutResize]
package:flutter/src/rendering/object.dart 887:17 flushLayout
package:flutter/src/rendering/binding.dart 401:19 drawFrame
package:flutter/src/widgets/binding.dart 884:13 drawFrame
package:flutter/src/rendering/binding.dart 283:5 [_handlePersistentFrameCallback]
package:flutter/src/scheduler/binding.dart 1108:15 [_invokeFrameCallback]
package:flutter/src/scheduler/binding.dart 1047:9 handleDrawFrame
package:flutter/src/scheduler/binding.dart 856:7 <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 50:19 internalCallback
The following RenderObject was being processed when the exception was fired: RenderFlex#f5e21 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
creator: Column ← Column ← Align ← ConstrainedBox ← Container ← Center ← MainScreen ← _BodyBuilder ←
MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← ⋯
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=929.0, 0.0<=h<=Infinity)
size: MISSING
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
This RenderObject had the following descendants (showing up to depth 5):
child 1: RenderFlex#9da6e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child 1: RenderRepaintBoundary#b779b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: RenderCustomPaint#67333 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: RenderRepaintBoundary#89099 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: _RenderScrollSemantics#0b273 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child 2: RenderFlex#fb6ad NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child 1: _RenderColoredBox#0acb4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
child: RenderParagraph#61e06 NEEDS-LAYOUT NEEDS-PAINT
text: TextSpan
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: Assertion failed: file:///C:/flutter/packages/flutter/lib/src/rendering/box.dart:1694:12
Another exception was thrown: Assertion failed: file:///C:/flutter/packages/flutter/lib/src/rendering/shifted_box.dart:322:12
Another exception was thrown: NoSuchMethodError: '<Unexpected Null Value>'
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following NoSuchMethodError was thrown during paint():
'<Unexpected Null Value>'
method not found
Receiver: null
Arguments: []
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 196:49 throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 37:3 throwNullValueError
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 450:39 _notNull
package:flutter/src/rendering/flex.dart 475:38 get [_hasOverflow]
package:flutter/src/rendering/flex.dart 949:10 paint
...
The following RenderObject was being processed when the exception was fired: RenderFlex#62f2b relayoutBoundary=up1
... needs compositing
... parentData: offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=929.0, 0.0<=h<=876.0)
... size: MISSING
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
RenderObject: RenderFlex#62f2b relayoutBoundary=up1
needs compositing
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=929.0, 0.0<=h<=876.0)
size: MISSING
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
... child 1: RenderFlex#6be7a NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
... constraints: MISSING
... size: MISSING
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
... child 1: RenderRepaintBoundary#15c70 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
... constraints: MISSING
... size: MISSING
... usefulness ratio: no metrics collected yet (never painted)
... child: RenderCustomPaint#79694 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... child: RenderRepaintBoundary#81e95 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... usefulness ratio: no metrics collected yet (never painted)
... child 2: RenderFlex#f5e21 relayoutBoundary=up2 NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
... constraints: BoxConstraints(0.0<=w<=929.0, 0.0<=h<=Infinity)
... size: MISSING
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
... child 1: RenderFlex#9da6e NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
... constraints: MISSING
... size: MISSING
... direction: horizontal
... mainAxisAlignment: spaceEvenly
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
... child 1: RenderRepaintBoundary#b779b NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
... constraints: MISSING
... size: MISSING
... usefulness ratio: no metrics collected yet (never painted)
... child: RenderCustomPaint#67333 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... child 2: RenderFlex#fb6ad NEEDS-LAYOUT NEEDS-PAINT
... parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
... constraints: MISSING
... size: MISSING
... direction: horizontal
... mainAxisAlignment: spaceEvenly
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down
... child 1: _RenderColoredBox#0acb4 NEEDS-LAYOUT NEEDS-PAINT
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
... constraints: MISSING
... size: MISSING
... behavior: opaque
... child: RenderParagraph#61e06 NEEDS-LAYOUT NEEDS-PAINT
... parentData: <none>
... constraints: MISSING
... size: MISSING
... textAlign: start
... textDirection: ltr
... softWrap: wrapping at box width
... overflow: clip
... locale: en_US
... maxLines: unlimited
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:46:13
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (3) Exception caught by rendering library ═════════════════════════════════════════════════
Assertion failed: file:///C:/flutter/packages/flutter/lib/src/rendering/box.dart:1694:12
hasSize
"RenderBox was not laid out: RenderFlex#f5e21 relayoutBoundary=up2 NEEDS-PAINT"
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (4) Exception caught by rendering library ═════════════════════════════════════════════════
Assertion failed: file:///C:/flutter/packages/flutter/lib/src/rendering/shifted_box.dart:322:12
child.hasSize
is not true
The relevant error-causing widget was:
Container file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:21:14
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (5) Exception caught by rendering library ═════════════════════════════════════════════════
'<Unexpected Null Value>'
method not found
Receiver: null
Arguments: []
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (6) Exception caught by rendering library ═════════════════════════════════════════════════
Assertion failed: file:///C:/flutter/packages/flutter/lib/src/rendering/box.dart:1694:12
hasSize
"RenderBox was not laid out: RenderFlex#f5e21 relayoutBoundary=up2 NEEDS-PAINT"
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (7) Exception caught by rendering library ═════════════════════════════════════════════════
Assertion failed: file:///C:/flutter/packages/flutter/lib/src/rendering/shifted_box.dart:322:12
child.hasSize
is not true
The relevant error-causing widget was:
Container file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:21:14
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (8) Exception caught by rendering library ═════════════════════════════════════════════════
'<Unexpected Null Value>'
method not found
Receiver: null
Arguments: []
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (9) Exception caught by rendering library ═════════════════════════════════════════════════
'<Unexpected Null Value>'
method not found
Receiver: null
Arguments: []
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ (10) Exception caught by rendering library ════════════════════════════════════════════════
'<Unexpected Null Value>'
method not found
Receiver: null
Arguments: []
The relevant error-causing widget was:
Column file:///C:/Users/Jorge%20Antelo/Desktop/Flutter/hotelmanager/lib/mainContainer.dart:25:16
════════════════════════════════════════════════════════════════════════════════════════════════════
Application finished.

Answer 1

The error occurs because you are trying to expand without constrains. Expanded Widget is used with a parent with dimension constrains. Since you are using it directly as one of the children in a column it can't infer which dismission to take.
By default Expanded expand to fill dimension of the parent so you have to provide a parent like a container or padding or sizeBoxed
Edit:
You will also need some flex widgets ( Flexible) to achieve the layout.
follow this link to see a sample I made in dartpad.
return Column(
children: <Widget>[
Flexible(
flex: 1,
child: Row(children: <Widget>[
Expanded(
child: Container(
height: 150,
color: Colors.black,
child: RaisedButton(onPressed: null)))
])),
Flexible(
flex: 6,
child: Row(
children: <Widget>[
Flexible(
flex: 1,
child: Column(children: <Widget>[
Expanded(
child: Container(
width: 200,
color: Colors.white,
child: RaisedButton(onPressed: null)))
])),
Flexible(
flex: 3,
child: Column(
children: <Widget>[
Flexible(
flex: 1,
child: Row(children: <Widget>[
Expanded(
child: Container(
height: height,
color: Colors.red,
child: RaisedButton(onPressed: null)))
])),
Flexible(
flex: 10,
child: Row(children: <Widget>[
Expanded(
child: Container(
height: height,
color: Colors.green,
child: RaisedButton(
onPressed: null,
)))
])),
],
),
),
],
),
),
],
);