RenderCustomMultiChildLayoutBox object was given an infinite size during layout. flutter error

Question

I am new to flutter and am trying to implement custom list view in flutter. Its giving be RenderCustomMultiChildLayoutBox object was given an infinite size during layout error

1. I am not able to get for which widget its throwing error

2 Also please suggest how to debug these layout errors as the error trace doesn't have specific widget info for which error is thrown

please find the below code for the same:

      class ChatItemSreen extends StatelessWidget {
      var leftSection;
      var middleSection;
      var rightSection;
      ChatModel _chartObj;

      ChatItemSreen(ChatModel _chartObj) {
        this._chartObj = _chartObj;
        //.........the left section ...........................
        CircleAvatar image = new CircleAvatar(
          backgroundColor: Colors.lightGreen,
          backgroundImage: new NetworkImage(this._chartObj.geturl()),
          radius: 24.0,
        );

        leftSection = new Container(child: image);

        //.........the middle section ...........................
        middleSection = new Expanded(
            child: new Container(
          padding: new EdgeInsets.only(left: 8.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new Text(this._chartObj.getuserName(),
                  style: new TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w300,
                      fontSize: 16.0)),
              new Text(this._chartObj.getmessage(),
                  style: new TextStyle(color: Colors.grey))
            ],
          ),
        ));

        //.........the right section ...........................

        rightSection = new Container(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new Text(this._chartObj.gettimeStamp()),
              new CircleAvatar(
                  backgroundColor: Colors.lightGreen,
                  radius: 12.0,
                  child: new Text(
                    this._chartObj.getunreadMsgNo(),
                    style: new TextStyle(color: Colors.white, fontSize: 12.0),
                  ))
            ],
          ),
        );
      }

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new Container(
              margin: new EdgeInsets.all(2.0),
              child: new Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[leftSection, middleSection, rightSection],
              )),
        );
      }
    }

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "Shashank List", home: RandomWords());
  }
}

class RowItemState extends State<RandomWords>
{
  final List<ChatModel> items = new List();

  @override
  void initState()
  {
    super.initState();
    setState(()
    {
      items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "9:35", "2", "Shashank", "Missed vedio call!!"));
      items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "10:35", "3", "Kakroo", "Missed vedio call!!"));
      items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "02:45", "4", "Alpha 1", "Missed vedio call!!"));
      items.add(new ChatModel("http://img2.thejournal.ie/inline/2470754/original?width=428&version=2470754", "12:30", "6", "Beta 2", "Missed vedio call!!"));

    });
  }

  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
        home: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,position)
            {
              ChatModel obj = items.elementAt(position);
              return new ChatItemSreen(obj);
            }
        ),
    );
  }
}

is giving me below error:

XCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (15078): The following assertion was thrown during performLayout():
I/flutter (15078): RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter (15078): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (15078): inside another render object that allows its children to pick their own size.
I/flutter (15078): The nearest ancestor providing an unbounded height constraint is:
I/flutter (15078):   RenderIndexedSemantics#a9825 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (15078):   creator: IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ←
I/flutter (15078):   AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ← Viewport ← _ScrollableScope ←
I/flutter (15078):   IgnorePointer-[GlobalKey#e8d9b] ← Semantics ← Listener ← ⋯
I/flutter (15078):   parentData: index=0; layoutOffset=0.0 (can use size)
I/flutter (15078):   constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (15078):   semantic boundary
I/flutter (15078):   size: MISSING
I/flutter (15078):   index: 0
I/flutter (15078): The constraints that applied to the RenderCustomMultiChildLayoutBox were:
I/flutter (15078):   BoxConstraints(w=411.4, 0.0<=h<=Infinity)
I/flutter (15078): The exact size it was given was:
I/flutter (15078):   Size(411.4, Infinity)
I/flutter (15078): See https://flutter.io/layout/ for more information.

Answer 1

I had this exact problem while trying to include a pinch-and-zoomable PhotoView widget among separate paragraphs of text.

When you compile and run the app, you probably noticed that where your offending widget is supposed to be is an infinitely long black area instead.

The second line of the error reads

was given an infinite size during layout

which implies that the widget's size needs to be constrained.

My solution was to wrap the PhotoView in a SizedBox widget.

...
   Text("Here's some text.\nAnd then there's this image:\n"),
   SizedBox(
      width: 200.0,
      height: 300.0,
      child: PhotoView(
            imageProvider: NetworkImage("http://image/url/here.jpg"),
            heroTag: "Lauren Mayberry",
            ),
   ),
   Text("And now more text"),
...

In this example, I used a fixed width and height but you could always dynamically size your widget based on whatever content belongs therein.

As for how to better debug layout errors: my only suggestion is to remove widgets one at a time until the error goes away. It's certainly less than ideal but it works.

Answer 2

The log says that box constraint height was set to infinity which gives the infinite size of the box

The issue is because the ListView.builder has an unbounded height, yet has no Sized widget child or parent to base its size on.

Just one thing to be careful of: That context may not exist if the widget is not rendered. Which can cause a problem with 

ListView

 as widgets are rendered only if they are potentially visible.

You can wrap in LayoutBuilder:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
    //      height: constraints.maxHeight,
    //      width: constraints.maxWidth
              return ListView.builder(
                  itemCount: items.length,
                  itemBuilder: (context, position) {
                    ChatModel obj = items.elementAt(position);
                    return new ChatItemSreen(obj);
                  }
              );
            });
    );
  }