[dart] Flutter: RenderBox was not laid out

I'm trying to create a ListView but when I import the list_form.dart class i get this error. Maybe I made some mistakes with the layout because if I try to run it inside the main file I don't get this error.

This is the error:

    I/flutter (12956): --¦ EXCEPTION CAUGHT BY RENDERING LIBRARY ¦---------------------------------------------------------
I/flutter (12956): The following assertion was thrown during performResize():
I/flutter (12956): Vertical viewport was given unbounded height.
I/flutter (12956): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (12956): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (12956): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (12956): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (12956): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (12956): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (12956): the height of the viewport to the sum of the heights of its children.
I/flutter (12956):
I/flutter (12956): When the exception was thrown, this was the stack:
I/flutter (12956): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1133:15)
I/flutter (12956): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1186:6)
I/flutter (12956): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1616:9)
I/flutter (12956): #3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #5      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #7      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #9      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #11     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #18     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #19     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (12956): #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #21     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (12956): #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #23     RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13)
I/flutter (12956): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #25     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11)
I/flutter (12956): #26     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter (12956): #27     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7)
I/flutter (12956): #28     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14)
I/flutter (12956): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #30     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #32     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #33     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1192:11)
I/flutter (12956): #34     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #35     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #36     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #37     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #38     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1192:11)
I/flutter (12956): #39     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #40     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #42     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #45     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #46     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #48     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #50     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #51     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #52     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #53     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #54     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #55     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2884:13)
I/flutter (12956): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #57     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15)
I/flutter (12956): #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #59     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #60     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #61     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #62     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #63     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #64     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #65     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #66     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #67     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #68     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #69     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:108:13)
I/flutter (12956): #70     RenderObject.layout (package:flutter/src/rendering/object.dart:1631:7)
I/flutter (12956): #71     RenderView.performLayout (package:flutter/src/rendering/view.dart:147:13)
I/flutter (12956): #72     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1506:7)
I/flutter (12956): #73     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:765:18)
I/flutter (12956): #74     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19)
I/flutter (12956): #75     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:674:13)
I/flutter (12956): #76     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
I/flutter (12956): #77     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter (12956): #78     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter (12956): #79     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7)
I/flutter (12956): #81     _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
I/flutter (12956): #82     _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
I/flutter (12956): #83     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)
I/flutter (12956): (elided one frame from package dart:async)
I/flutter (12956):
I/flutter (12956): The following RenderObject was being processed when the exception was fired:
I/flutter (12956):   RenderViewport#925a8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956):   creator: Viewport ? _ScrollableScope ? IgnorePointer-[GlobalKey#8e8f7] ? Semantics ? Listener ?
I/flutter (12956):   _GestureSemantics ? RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#67ae5] ?
I/flutter (12956):   _ScrollSemantics-[GlobalKey#17eb8] ? RepaintBoundary ? CustomPaint ? RepaintBoundary ?
I/flutter (12956):   NotificationListener<ScrollNotification> ? ?
I/flutter (12956):   parentData: <none> (can use size)
I/flutter (12956):   constraints: BoxConstraints(unconstrained)
I/flutter (12956):   size: MISSING
I/flutter (12956):   axisDirection: down
I/flutter (12956):   crossAxisDirection: right
I/flutter (12956):   offset: ScrollPositionWithSingleContext#c4917(offset: 0.0, range: null..null, viewport: null,
I/flutter (12956):   ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#2fecf,
I/flutter (12956):   ScrollDirection.idle)
I/flutter (12956):   anchor: 0.0
I/flutter (12956): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (12956):   RenderSliverPadding#74d62 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (12956):     RenderSliverList#5c56d NEEDS-LAYOUT NEEDS-PAINT
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.

This is the list_form.dart class:

import 'package:flutter/material.dart';

class ListForm extends StatefulWidget {
  @override
  ListFormState createState() => new ListFormState();
}

class ListFormState extends State<ListForm> {
    List<String> products = ["Test1", "Test2", "Test3"];
    @override
    Widget build(BuildContext context) {
      return new Container(
        child: new Center(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new ListView.builder(
                    itemCount: products.length,
                    itemBuilder: (BuildContext ctxt, int index) {
                      return new Text(products[index]);
                    }
                  ),
                  new IconButton(
                    icon: Icon(Icons.remove_circle),
                    onPressed: () { },
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
              new TextField(
                decoration: new InputDecoration(
                  hintText: "Prodotto"
                ),
                onSubmitted: (String str) {
                  setState(() {
                    products.add(str);
                  });
                },
              ),
            ]
          )
        )
      );
    }
}

This is the app_base.dart class:

import 'package:flutter/material.dart';
import '../UI/list_form.dart';

class AppBase extends StatefulWidget {
  @override
  State createState() => new AppBaseState();
}

class AppBaseState extends State<AppBase> {
  bool _pressed = true;

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.greenAccent,
      child: new Scaffold(
        body:
          new ListForm(),
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Skeeper'),
          backgroundColor: Colors.green,
        ),
        floatingActionButton: FloatingActionButton(
          tooltip: 'Test',
          child: new Icon(Icons.add),
          backgroundColor: Colors.green,
          onPressed: () {
              setState(() {
                _pressed = !_pressed;
              });
          },
        ),
      )
    );
  }
}

Don't worry if there is some unused code, it's a work in progress and this error just stopped me continuing what I was doing.

This question is related to dart flutter flutter-layout

The answer is


Reason for the error:

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


Solutions

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

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

  1. 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(),
        )
      ],
    )
    

  1. Use shrinkWrap, if your ListView isn't too big.

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

You can add some code like this

ListView.builder{
   shrinkWrap: true,
}

Wrap your ListView in an Expanded widget

 Expanded(child:MyListView())

I had a simmilar problem, but in my case I was put a row in the leading of the Listview, and it was consumming all the space, of course. I just had to take the Row out of the leading, and it was solved. I would recomend to check if the problem is a widget larger than its containner can have.


Placing your list view in a Flexible widget may also help,

Flexible( fit: FlexFit.tight, child: _buildYourListWidget(..),)

Reading answers here, it seems that the error "RenderBox was not laid out" is caused when somehow the ListView size is limitless and this can happen in different scenarios.

Just aiming to help who may have the same case as mine. In my case, I was getting this error because my ListView was inside a a column whose parent was a SingleChildScrollView. I remove this parent and it worked.

Here is my working code:

 List _todoList = ["AAA", "BBB"];

 ...

    body: Column(
      children: [
        Container(...),
        Expanded(
            child: ListView.builder(
                itemCount: _todoList.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(_todoList[index]));
                }))
      ],
    ));

Here how it was when I was getting the "not laid out" error:

     List _todoList = ["AAA", "BBB"];

     ...


     body: SingleChildScrollView(child: Column(
      children: [
        Container(...),
        Expanded(
            child: ListView.builder(
                itemCount: _todoList.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(_todoList[index]));
                }))
      ],
    )));

I hope this may be useful for someone.


i

I used this code to fix the issue of displaying items in the horizontal list.

new Container(
      height: 20,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: array.length,
            itemBuilder: (context, index){
              return array[index];
            },
          ),
        ],
      ),
    );

I had a similir problem, but in my case, I put a row in the leading of the ListView, and it was consuming all the space, of course. I just had to take the Row out of the leading, and it was solved. I would recommend to check if the problem is a larger widget than its container can have.

Expanded(child:MyListView())