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

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


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.


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);                  }              );            });    );  }