ListView Error( RenderBox was not laid out:) – Nested ListView Error

by

Here are the exception lines are written in the console. (RenderBox was not laid out)

Screenshot

RenderBox was not laid out
RenderBox was not laid out

RenderBox was not laid out: RenderViewport#74697 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Failed assertion: line 1930 pos 12: ‘hasSize’

So these are the error lines that can be seen in the console box. Sometimes this is happening due to nested use of list inside a list

 ListView(
               children: [
                 Container(
                   margin: EdgeInsets.only(top: 20.0),
                   width: double.infinity,
                   height: 140,
                   color: Colors.red,
                 ),
                 ListView(
                   children: [

                   ],
                 ),

               ],
      );

As in the above example, I am using ListView inside the ListView. The issue is related to the rendering problem. ListView Cant under sand which ListView to scroll on Touch Signals.

Solution

To solve this issue You just need to add two properties in the nested ListView.


physics: ClampingScrollPhysics(),
shrinkWrap: true,

ClampingScrollPhysics  Class

Scroll physics for environments that prevent the scroll offset from reaching beyond the bounds of the content.

This is the behavior typically seen on Android.

ShrinkWrap property

Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed.

If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size in the scrollDirection. If the scroll view has unbounded

constraints in the scrollDirection, then shrinkWrap must be true.

Shrinkwrapping the content of the scroll view is significantly more expensive than expanding to the maximum allowed size because the content can expand and contract during scrolling, which means the size of the scroll view needs to be recomputed whenever the scroll position changes.

Defaults to false.

Add these two properties on Nested ListView which will make nested ListView non Scrollable.

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com

Leave a Comment