Flutter：嵌套 ListView 有效。 嵌套的 SliverList 没有，但 ListView 包含 Sliver

Question

I ran into a particular issue. I am able to compose a vertical outer ListView which contains horizontal ListView s. Think of it as multiple Friend Suggestion Row on Facebook stacked on top of each other. This works fine.

Because I want to utilize the perks that come with a SliverAppBar , I need to have a CustomScrollView as the parent Widget and then add only slivers in its slivers collection.

When I tried to add a SliverList inside the SliverChildBuilderDelegate , I get all sorts of errors, mostly, render-related types errors. It seems like there is a constraint in the kind of child a SliverChildBuilderDelegate can build.

NEEDS-COMPOSITING-BITS-UPDATE:
  needs compositing
  creator: Viewport ← IgnorePointer-[GlobalKey#a5a09] ← Semantics ← Listener ← _GestureSemantics ←
    RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#db221] ← Listener ← _ScrollableScope
    ← _ScrollSemantics-[GlobalKey#57142] ← Scrollable ← CustomScrollView ← Padding ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=412.0, 0.0<=h<=Infinity)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: ScrollPositionWithSingleContext#415a2(offset: 0.0, range: null..null, viewport: null,
    ScrollableState, BouncingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#74aea,
    ScrollDirection.idle)
  anchor: 0.0
This RenderObject had the following child:
    center child: RenderSliverList#5219f NEEDS-LAYOUT NEEDS-PAINT
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: RenderViewport#e26b4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Another exception was thrown: RenderBox was not laid out: RenderViewport#e26b4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#e30f7 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#d70ab relayoutBoundary=up9 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE

As you can see, I tried to wrap the SliverList in a non-sliver type of Widget, to no avail.

I tried to solve it using NestedScrollView but I keep getting the same kind of errors.

Has anyone run into this situation before. I went thru the source code and I can see that ListView is basically a BoxScrollView with an internal ScrollView .

Do I need to create a specialized Widget to fulfill this layout design. If that's the case, I am already scratching my head about Flutter.

Answer 1

Solved. All I was lacking was height and width in the containing Container of my nested SliverList .