Menu
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)
952
You might want to create a list that scrolls horizontally rather than vertically. The ListView widget supports horizontal lists. Use the standard ListView constructor, passing in a horizontal scrollDirection , which overrides the default vertical direction.
To scroll a Flutter ListView widget horizontally, set scrollDirection property of the ListView widget to Axis. horizontal. This arranges the items side by side horzontally. Following is the basic syntax to arrange the items horizontally in a ListView and scroll them horizontally.
ListView is a very popular Flutter component. It’s a linear scrollable widget that arranges its children linearly and supports horizontal and vertical scrolling. Fun fact: Column and Row widgets are like ListView but without the scroll view. The default constructor takes an explicit list of widgets called children.
Building scrollable widgets is an important skill you should master! Flutter makes it easy to build and use such scrollable widgets. It offers the flexibility to scroll in any direction and the power to nest scrollable widgets. With the skills you’ve learned, you can build cool scroll interactions.
Make ExploreScreen a stateful widget. Create an instance of ScrollController in the initState (). Create scrollListener () to listen to the scroll position. Add a scroll listener to the scroll controller. Add the scroll controller to the ListView. Dispose your scroll scrollListener ().
In case the heights of the items are different and not set, move on to another method in this article. This example app contains a ListView with 100 items and a floating button. When the user presses the floating button, the view will scroll to a random item (you can replace it with a constant number if you want to).
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
65
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).
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
