SingleChildScrollView error with Column and ListView

Question

I have a SingleChildScrollView Widget, which contains a Column child. The Column child contains two custom widget. The first custom widget is a carousel slider widget. The second custom widget is an Expanded widget, which contains a SmartRefresher widget, which contains a ListView.

 SingleChildScrollView(
        child: Column(
          children: [
            CarouselSlider(...),
            Expanded(
              child: SmartRefresher(
                child: ListView(...),
              ),
            )
          ],
        ),
      ),

The reason I am using a SingleChildScrollView is that I would like the carousel slider to scroll together with the list view when the user starts to scroll on the list view, but I do not want the CarouselSlider to be part of the list itself.

When I try to run the code, I get the following error:

The following RenderObject was being processed when the exception was fired: RenderFlex#783cc relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE RenderObject: RenderFlex#783cc relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE needs compositing parentData: (can use size) constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity) size: MISSING direction: vertical mainAxisAlignment: start mainAxisSize: max crossAxisAlignment: center verticalDirection: down child 1: RenderPadding#8076a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE needs compositing parentData: offset=Offset(0.0, 0.0); flex=null; fit=null constraints: MISSING

You can also avoid using ListView and just use column in this case. — Yeasin Sheikh
It's because Expanded doesn't know what space it lives in. It's like "expanded to... what?" The Column and SingleChildScrollView cannot have height. You should wrap you Column in a Container(height: MediaQuery.of(context).size.height) or some other widget that can define the size of the container for which Expanded can grow. — daddygames
Same thing applies to ListView as expanded. The ListView needs to know how much space to fill. So when it gets wrapped in a non-sized widget, it can get confused about what space to fill in the UI. — daddygames
@daddygames Thanks for the reply! I've done as you said, and I am running into another issue where the CarouselSlider widget does not seem to move with the ListView, even when the user scrolls on the page. Do you know how I could tackle this? — wepowf

Yeasin Sheikh Yeasin Sheikh · Accepted Answer · 2021-11-30T14:47:25

SingleChildScrollView provide infinite height and Expanded taking infinite height causing the issue

you can simply do this,

 SingleChildScrollView(
        child: Column(
          children: [
            CarouselSlider(
              items: [
                ...List.generate(
                    4,
                    (index) => Container(
                          color:
                              index.isEven ? Colors.amber : Colors.deepPurple,
                        ))
              ],
              options: CarouselOptions(),
            ),
            ...List.generate(
              44,
              (index) => Container(
                height: 100,
                color: index.isEven ? Colors.green : Colors.pink,
              ),
            ),
          ],
        ),
      ),

SingleChildScrollView error with Column and ListView

1 Answers