Flutter Listview Scrollable Row
Solution 1
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
Solution 2
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).
Solution 3
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
.
Solution 4
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.
Solution 5
Wrap the 'ListView' with an 'Expanded' widget.
new Expanded (
child: new ListView (
.....
)
)
Related videos on Youtube
Niccolo
Updated on July 09, 2022Comments
-
Niccolo almost 2 years
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)
-
Edman almost 6 yearsIs this your full build function? The snippet you provided works without error on my machine.
-
Niccolo almost 6 yearslet me show the full build
-
Pushan Gupta over 5 yearsfor every listview, shrinkWrap: true
-
Paresh Mangukiya over 3 yearsmust be see : stackoverflow.com/a/63955956/10563627
-
-
Edman almost 6 yearsCan you update the question with the error and where it happens in your code? I just tried the snippet above and
SizedBox
solved the issue in my machine. -
Edman almost 6 yearsActually, I ran the code you posted in the question and it also works in my machine. Because you're wrapping the
ListView
in aContainer
with fixed height, it acts like aSizedBox
. -
Niccolo almost 6 yearsflutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. flutter: When a column is in a parent that does not provide a finite height constraint, for example if it is flutter: in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flutter: flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining flutter: space in the vertical direction.