[Solved] BoxConstraints forces an infinite width/height Error in Flutter

In this example, we are going to show you how to solve the "BoxConstraints forces an infinite width/height" error in the Flutter app. This error occurs when the parent widget has an infinite container and the child widget has infinite width or height.

Error Message:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite width.
These invalid constraints were provided to _RenderColoredBox's layout() function by the following
function, which probably computed the invalid constraints in question:
  RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:277:14)
The offending constraints were:

Case 1: Positioned Widget

When Positioned() widget has a child with infinite width on the condition below, you may get the error "BoxConstraints forces an infinite width".

Positioned(
    bottom: 0,
    child: Container( 
      width: double.infinity,
    ),
) //Error: BoxConstraints forces an infinite width

Positioned(
    top: 0,
    child: Container( 
      height: double.infinity,
    ),
) //Error: BoxConstraints forces an infinite height

To solve this error, set the width of Positioned() widget like below:

Positioned(
    top:30,
    left:20, //set left 0, to start without margin at left
    right:30, //set right 0 to end without margin at right
    bottom:100,
    child: Container( 
      color: Colors.red,
    ),
)

Use, top, left, right, bottom to set the starting and ending point of height and width of the child container inside Positioned() widget. or you can also set bounded height and width to child widget like below:

Positioned(
    bottom:100,
    child: Container( 
      color: Colors.red,
      height: 100,
      width: 300,
    ),
)

Case 2: Infinite Width in Row()

Row(
  children:[
      Container(
        width: double.infinity,
      )
  ]
) //Error: BoxConstraints forces an infinite width.

When you put children in Row() widget with infinite width, you may get "BoxConstraints forces an infinite width." error. To solve this error, wrap your child widgets with Expanded() widget instead of giving its width infinite.

Row(
  children:[
      Expanded(
        child:Container(
            width: double.infinity,
        )
      )
  ]
)

Case 3: Infinite Height in Column()

Column(
  children:[
    Container(
       height: double.infinity,
    )
  ]
) //Error: BoxConstraints forces an infinite height.

When you put child widget to Column with infinite height, you may get "BoxConstraints forces an infinite height." Error. To solve this error, you should bound the height of the child widget with Expanded() widget like below:

Column(
  children:[
    Expanded(
      child:Container(
         height: double.infinity,
      )
    )
  ]
)

In this way, you can solve "BoxConstraints forces an infinite width/height" error in the Flutter app.