How to Solve Render Box Was not Laid Out In Flutter?

· 3 min read
Render Box Was Not Laid Out
Render Box Was Not Laid Out

When loading displays it in a listView sometimes it may throw an error. How to Solve Render Box Was not Laid Out In Flutter?

How to Solve Render Box Was not Laid Out In Flutter?

This is kind of error generally occurs when the user places a  ListView Widget inside Row Widget or Column Widget. To avoid this error users need to provide a size to the ListView inside.

Here column tries to expand in the vertical axis, and so does the ListView, hence you need to constrain the height of ListView.

Solutions: 

  • Use either Expanded or Flexible if you want to allow ListView to take up the entire left space in Column.
Column(
  children: <Widget>[
    Expanded(
      child: ListView(...),
    )
  ],
)
  • Use SizedBox if you want to restrict the size of ListView to a certain height.
    Column(
      children: <Widget>[
        SizedBox(
          height: 200, // constrain height
          child: ListView(),
        )
      ],
    )
  • Use shrinkWrap, if your ListView isn’t too big.
    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use it
        )
      ],
    )
  • Placing your list view in a Flexible Widget may also help,
    Flexible( fit: FlexFit.tight, child: _buildYourListWidget(..),)
  • Wrap your ListView in an Expanded widget
    Expanded(child:MyListView())
  • Consider a code which uses an Expanded to inform the horizontal size  and the SizedBox  for the height:
new Row(
   children: <Widget>[
     Expanded(
       child: SizedBox(
         height: 200.0,
         child: new ListView.builder(
           scrollDirection: Axis.horizontal,
           itemCount: products.length,
           itemBuilder: (BuildContext ctxt, int index) {
             return new Text(products[index]);
           },
         ),
       ),
     ),
     new IconButton(
       icon: Icon(Icons.remove_circle),
       onPressed: () {},
     ),
   ],
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
 )

Conclusion:

In this article,  We have been through How to Solve Render Box Was not Laid Out In Flutter?

Thanks for Reading !!! Keep Learning !!!

Do let us know if you need any assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply