如何在 ListView 中正确嵌套 ListView.builder？

Question

Edit: The answer is you need to either give a specific height or set the ListView shrinkWrap property true, without it the listView has an unbounded height and that's why the render library gives an exception.

I'm trying to nest ListView but unfortunately, I'm getting EXCEPTION by RENDER LIBRARY. I tried multiple ways of nesting ListViews from existing references, but all I did was confused my self.

Here is the concept design of the app as you can see. I am trying to add new listview.builder for genres and cast and then buttons.

Image of concept design

Image of Code

Gist link to file: https://gist.github.com/purplecandy/279364f2a229ee3120a4b7474123dba9

Actually I was getting different types of error :/ as I was trying different implementation of it. This is from the current implementation

I/flutter ( 2244): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2244): The following assertion was thrown during performLayout():
I/flutter ( 2244): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1598 pos 16:
I/flutter ( 2244): 'constraints.hasBoundedHeight': is not true.
I/flutter ( 2244):
I/flutter ( 2244): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 2244): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 2244): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 2244):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 2244):
I/flutter ( 2244): When the exception was thrown, this was the stack:
I/flutter ( 2244): #2      RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1598:16)
I/flutter ( 2244): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #4      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #6      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #8      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #14     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #18     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #19     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #20     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter ( 2244): #21     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #22     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #23     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #24     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #25     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #26     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:404:13)
I/flutter ( 2244): #27     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:190:19)
I/flutter ( 2244): #28     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:233:19)
I/flutter ( 2244): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #30     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:182:11)
I/flutter ( 2244): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #32     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:405:13)
I/flutter ( 2244): #33     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1316:12)
I/flutter ( 2244): #34     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1234:20)
I/flutter ( 2244): #35     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #36     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #38     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #39     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #40     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #42     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #45     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #46     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #48     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #50     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #51     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #52     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
I/flutter ( 2244): #53     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter ( 2244): #54     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
I/flutter ( 2244): #55     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
I/flutter ( 2244): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #57     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #59     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #60     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1188:11)
I/flutter ( 2244): #61     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #62     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #63     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #64     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #65     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #66     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #67     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #68     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #69     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #70     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #71     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #72     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #73     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #74     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 2244): #75     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #76     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2879:14)
I/flutter ( 2244): #77     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 2244): #78     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
I/flutter ( 2244): #79     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1509:7)
I/flutter ( 2244): #80     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:768:18)
I/flutter ( 2244): #81     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:281:19)
I/flutter ( 2244): #82     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:677:13)
I/flutter ( 2244): #83     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
I/flutter ( 2244): #84     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 2244): #85     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter ( 2244): #86     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 2244): #87     _invoke (dart:ui/hooks.dart:154:13)
I/flutter ( 2244): #88     _drawFrame (dart:ui/hooks.dart:143:3)
I/flutter ( 2244): (elided 2 frames from class _AssertionError)
I/flutter ( 2244):
I/flutter ( 2244): The following RenderObject was being processed when the exception was fired:
I/flutter ( 2244):   RenderShrinkWrappingViewport#9e743 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2244):   creator: ShrinkWrappingViewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#75473] ← Semantics ←
I/flutter ( 2244):   Listener ← _GestureSemantics ←
I/flutter ( 2244):   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#a81bd] ←
I/flutter ( 2244):   _ScrollSemantics-[GlobalKey#aa93a] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter ( 2244):   NotificationListener<ScrollNotification> ← ⋯
I/flutter ( 2244):   parentData: <none> (can use size)
I/flutter ( 2244):   constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=Infinity)
I/flutter ( 2244):   size: MISSING
I/flutter ( 2244):   axisDirection: right
I/flutter ( 2244):   crossAxisDirection: down
I/flutter ( 2244):   offset: ScrollPositionWithSingleContext#2a8f7(offset: 0.0, range: null..null, viewport: null,
I/flutter ( 2244):   ScrollableState, ClampingScrollPhysics, IdleScrollActivity#ff81b, ScrollDirection.idle)
I/flutter ( 2244): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 2244):   RenderSliverPadding#c485f NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2244):     RenderSliverList#1516b NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2244): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderShrinkWrappingViewport#9e743 relayoutBoundary=up14 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#b0d15 relayoutBoundary=up13 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#110a1 relayoutBoundary=up12 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#52bac relayoutBoundary=up11 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#f37d1 relayoutBoundary=up10 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#3b8cd relayoutBoundary=up9 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#08271 relayoutBoundary=up8 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#8d178 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#ef2c5 relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderFlex#e3d23 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#093a9 relayoutBoundary=up4 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 461 pos 12: 'child.hasSize': is not true.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
I/flutter ( 2244): GET requested properly
I/flutter ( 2244): Another exception was thrown: RenderBox was not laid out: RenderIndexedSemantics#3afa7 relayoutBoundary=up3 NEEDS-PAINT
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
I/flutter ( 2244): Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1578 pos 12: '!_debugDoingThisLayout': is not true.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter ( 2244): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.

Answer 1

Put your ListView.builder inside a Widget with a defined height.

Example:

Container(
      height: double.maxFinite,
      child: ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 6,
      itemBuilder: (BuildContext context, int index) {
           return Text(
                '${index}',
                style:
                    TextStyle(color: Colors.white, fontSize: 146),
                );
      },
)),

Answer 2

You have to make sure your horizontal ListView is within some sort of heighted Widget like a Container :

class HomePage extends StatefulWidget {
  @override
  State createState() => HomePageState();
}

class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  List<Widget> boxes = [];

  @override
  void initState() {
    boxes.add(
      Container(
        width: 150.0,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.red),
        ),
      ),
    );
    boxes.add(
      Container(
        width: 150.0,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.green),
        ),
      ),
    );
    boxes.add(
      Container(
        width: 150.0,
        child: Container(
          decoration: BoxDecoration(color: Colors.blue),
        ),
      ),
    );
    boxes.add(
      Container(
        width: 150.0,
        child: DecoratedBox(
          decoration: BoxDecoration(color: Colors.orange),
        ),
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Material(
          child: Column(children: <Widget>[
        Expanded(
            child: ListView(
          children: <Widget>[
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.green),
              ),
            ),
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.blue),
              ),
            ),
            Container(
              height: 200.0,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: boxes.length,
                itemBuilder: (context, int index) {
                  return boxes[index];
                },
              ),
            ),
            Container(
              height: 200.0,
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.orange),
              ),
            ),
          ],
        ))
      ])),
    );
  }
}