Flutter Listview Scrollable Row

new 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.

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. (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. (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#efcf9] ←
flutter: _ExcludableScrollSemantics-[GlobalKey#1ff3b] ← Scrollable ← ListView ← Column ← Padding ← ⋯
flutter: parentData: (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)


You can use Expanded widget to wrap your list view.
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).

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.

Try this code,

You can implement scrollable row in flutter using below code

and for scrollable column just change "Row" with "Column"

new SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Row(
children: <Widget>[
new Text('hi'),
new Text('hi'),
new Text('hi'),
]
)
)


see the output here

Wrap the 'ListView' with an 'Expanded' widget.

new Expanded (
child: new ListView (
.....
)
)


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 .

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,
),
),




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;