Search code examples
listviewflutterdart

Is it impossible to have ListView inside SingleChildScrollView?

Is it impossible to have ListView inside SingleChildScrollView? We trying to create three button which work like radio group button. We have found the solution from Flutter : Custom Radio Button .

But in our case, it is wrapped by SingleChildScrollView.

  body: SingleChildScrollView(
            padding: const EdgeInsets.all(8.0),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text(
                        Localization.of(context).priority,
                        style: TextStyle(fontSize: 15.0),
                      ),
                      ListView.builder(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        itemCount: sampleData.length,
                        itemBuilder: (BuildContext context, int index) {
                          return InkWell(
                            child: RadioItem(
                              sampleData[index],
                            ),
                          );
                        },
                      )
                    ],
                  )
                ]))

Error

The following RenderObject was being processed when the exception was fired: RenderShrinkWrappingViewport#4d85f relayoutBoundary=up27 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderShrinkWrappingViewport#4d85f relayoutBoundary=up27 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    needs compositing
    parentData: <none> (can use size)
    constraints: BoxConstraints(unconstrained)
    size: MISSING
    axisDirection: down
    crossAxisDirection: right
    offset: ScrollPositionWithSingleContext#fa7e6(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#d2e68, ScrollDirection.idle)
    child 0: RenderSliverPadding#37bf3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: layoutOffset=0.0
        constraints: MISSING
        geometry: null
        padding: EdgeInsets.zero
        textDirection: ltr
Solution

  • Surround you ListView with Expanded widget.

    You can't have a scrollable widget inside another scrollable widget without setting a proper height for the inner one.

    Or use ConstrainedBox

    sample