[Solved] Flutter: RenderBox was not laid out

Hello Guys how are you all ? Hope you all are fine. By using Flutter might be all flutter developer faced this error RenderBox was not laid out in Flutter.

I am trying to make ListView in my project file. Everything was working Fine. But when I applied Text Widget in my ListView builder. There is Some issue to use Text Widget.

How Flutter: RenderBox was not laid out Error occurs?

In my case, while I am using ListView inside a Column/Row. The text in the exception gives an error RenderBox was not laid out. As shown below.

Here Is My Code Where I am faced this Error

              children: <Widget>[
                  new ListView.builder(
                    itemCount: products.length,
                    itemBuilder: (BuildContext ctxt, int index) {
                      return new Text(products[index]);
                    }
                  ),
              ],

Error That I got In stack track

I/flutter (12956): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderViewport#925a8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderViewport#925a8 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#8bbda relayoutBoundary=up11 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#209b4 relayoutBoundary=up10 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#a9641 relayoutBoundary=up9 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#9f5b4 relayoutBoundary=up8 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#47944 relayoutBoundary=up7 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#e17a8 relayoutBoundary=up6 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#a2328 relayoutBoundary=up5 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#02607 relayoutBoundary=up4 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: RenderBox was not laid out: RenderFlex#79164 relayoutBoundary=up3 NEEDS-PAINT
I/flutter (12956): Another exception was thrown: 'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 pos 12: 'child.hasSize': is not true.
I/flutter (12956): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.

How to solve Flutter: RenderBox was not laid out?

Solution 1 : Use Expanded Widget

Column tries to expands in vertical axis, and so does the ListView, hence you need to constrain the height of ListView.

Error is thrown cause of Column is try to expands in vertical axis, that’s why you need to constrain the height of ListView.

Use Expanded if you want to allow ListView to take up entire left space in Column.

Column(
  children: <Widget>[
    Expanded(
      child: ListView(...),
    )
  ],
)

Solution 2 : Use Flexible Widget

Use Flexible if you want to allow ListView to take up entire left space in Column.

Column(
  children: <Widget>[
    Flexible(
      child: ListView(...),
    )
  ],
)

Solution 3 : Use SizedBox.

We Might Use SizeBox. if you want to restrict the size of ListView to a certain height.

Column(
  children: <Widget>[
    SizedBox(
      height: 200, // constrain height
      child: ListView(),
    )
  ],
)

Solution 4 : Use shrinkWrap Property of ListView

Use shrinkWrap, if your ListView isn’t too big.

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use it
    )
  ],
)

Solution 5 : Wrap your ListView in an Expanded widget

Wrap your ListView in an Expanded widget

 Expanded(
     child:MyListView(),
 )

So Hope This Above 5 Solution Will Work For You Too. So it’s all About Flutter: RenderBox was not laid out error. Hope this tutorial helped you a lot. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.

Also Read

• Could not resolve all files for configuration ‘classpath’. Could not find lint-gradle-api.jar
• Flutter plugin not installed; this adds Flutter specific functionality
• TextField inside of Row causes layout exception: Unable to calculate size
• PluginRegistry cannot be converted to FlutterEngine In Flutter
• How To Make Round button with text and icon in flutter?