CODEWITHSUNDEEP
flutterdart
andy3388
andy3388

Reputation: 35

How can I use a CustomScrollView as a child

I'm a newbie who just started Flutter.

I want to use CustomScrollView as a child of Row/Column Widget

It works very well when CustomScrollView is root. But as soon as I put it into Row Widget's child, it spouted an error.

Couldn't CustomScrollview be used as a child of Row widget? if so, please tell me the reason, and What is the best alternative?

Or if there is an error in my code, I want you to correct it.

What I want to make

my CustomScrollViewWidget

I don't know if this is what you want, but here's my error.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1758 pos 16:
'constraints.hasBoundedHeight': is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was:
  CustomScrollView



The following RenderObject was being processed when the exception was fired: RenderShrinkWrappingViewport#0344f relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  needs compositing
  creator: ShrinkWrappingViewport ← IgnorePointer-[GlobalKey#e4530] ← Semantics ← _PointerListener ←
    Listener ← _GestureSemantics ←
    RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#a61b3] ← _PointerListener ← Listener
    ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#42b3c] ← RepaintBoundary ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: ScrollPositionWithSingleContext#46fe1(offset: 0.0, range: null..null, viewport: null,
    ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#66c28,
    ScrollDirection.idle)
This RenderObject had the following child:
    child 0: RenderSliverList#42dfb NEEDS-LAYOUT NEEDS-PAINT
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderShrinkWrappingViewport#0344f relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'
The relevant error-causing widget was
CustomScrollView
lib\0. TestCode.dart:31
════════════════════════════════════════════════════════════════════════════════

Here is my code!

class WrapVisit extends StatefulWidget {
  WrapVisitState createState() => WrapVisitState();
}

class WrapVisitState extends State<WrapVisit> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: EdgeInsets.all(10),
      color: Colors.white,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              new Text(
                "브랜드관",
                textAlign: TextAlign.left,
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              new Container(
                margin: EdgeInsets.all(5),
                child: new Text(
                  "전체보기",
                  textAlign: TextAlign.right,
                  style: TextStyle(
                    fontSize: 10,
                    color: Colors.black,
                  ),
                ),
              ),
              CustomScrollView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        ... SliverListChildWidgets ...
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Upvotes: 3

Views: 3019

Answers (2)

August Kimo
August Kimo

Reputation: 1771

You need to wrap the scroll view in either a sized box or container first. It needs a parent with set dimensions. There’s a couple widgets that don’t work in rows/columns unless you put them inside a sized parent first.

Upvotes: 3

MickaelHrndz
MickaelHrndz

Reputation: 3832

Column doesn't like children with unbounded height. To fix it, set CustomScrollView's shrinkWrap parameter to true.

Upvotes: 6

Related Questions