[Solved] A RenderFlex overflowed by pixels on the right/bottom

In this example, we are going to show you how to solve two Errors: "A RenderFlex overflowed by pixels on the right" and "A RenderFlex overflowed by pixels on the bottom" in Flutter App.

Related: [Solved] ’Overflowed By Pixels’ Error on Keyboard Popup in Flutter

Error Message:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 941 pixels on the right.

The relevant error-causing widget was:
  Row Row:file:///C:/flutter_apps/testapp/lib/main.dart:32:20

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9102/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A54414%2FrGXl_NXKmP8%3D%2F&inspectorRef=inspector-88

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#a9df8 relayoutBoundary=up2 OVERFLOWING:
  creator: Row ← Padding ← Container ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
    CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
    _InkFeatures-[GlobalKey#a0c92 ink renderer] ← NotificationListener<LayoutChangedNotification> ← ⋯
  parentData: offset=Offset(0.0, 100.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=611.3)
  size: Size(392.7, 15.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down

OR:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 1449 pixels on the bottom.

The relevant error-causing widget was:
  Column Column:

Cause of The Error:

This error mostly happens on the Row and Column widget when its children have unbounded width or height. For example:

Case One: A RenderFlex overflowed by pixels on the right.

Row(
  children: [
    Text(
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
      " do eiusmod tempor incididunt ut labore et dolore magna "
      "aliqua. Ut enim ad minim veniam, quis nostrud "
      "exercitation ullamco laboris nisi ut aliquip ex ea "
      "commodo consequat."),
  ],
) 

Here, the row has a Text child that has no constrained size. While rendering the widget, the Text() widget will overflow the width of Row and the error will occur. 

Error Output:

Case Tow: A RenderFlex overflowed by pixels on the bottom

Column(
  children: [
      Container(
          height:2000,
      )
  ],
)

Here, the Column is rendered according to the height of its parent, and the child inside it will render more height than the column, and the error will occur.

Error Output:

Solution of the Error:

[Recommended Solution] In the case of Row, wrap the children widget of Row() with Expanded() widget, or you can wrap with SizedBox() and Container() and give the bounded width. For example:

Row(
  children: [
    Expanded(
      child:Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
        " do eiusmod tempor incididunt ut labore et dolore magna "
        "aliqua. Ut enim ad minim veniam, quis nostrud "
        "exercitation ullamco laboris nisi ut aliquip ex ea "
        "commodo consequat."),
    )
  ],
)

Here, expanded applies the maximum 100% width of the screen, so that the text inside Text() widget will break the line instead of overflow:

Or, you can also use Flexible() widget instead of Expanded() widget:

Row(
  children: [
    Flexible(
      child:Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
        " do eiusmod tempor incididunt ut labore et dolore magna "
        "aliqua. Ut enim ad minim veniam, quis nostrud "
        "exercitation ullamco laboris nisi ut aliquip ex ea "
        "commodo consequat."),
    )
  ],
)

The output of the above code is:

If you want to create Horizontally scrollable widgets if width is overflowed, then use your Row() widget like below:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child:Row(
  children: [
      Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
        " do eiusmod tempor incididunt ut labore et dolore magna "
        "aliqua. Ut enim ad minim veniam, quis nostrud "
        "exercitation ullamco laboris nisi ut aliquip ex ea "
        "commodo consequat."),
    ],
  ),
)

OR, you can also wrap with SizedBox() or Container() and pass the width, for example:

Row(
  children: [
    SizedBox(
      width:300, //width must be less than the width of Row(),
      child:Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
        " do eiusmod tempor incididunt ut labore et dolore magna "
        "aliqua. Ut enim ad minim veniam, quis nostrud "
        "exercitation ullamco laboris nisi ut aliquip ex ea "
        "commodo consequat."),
    )
  ],
)

Row(
  children: [
    Container(
      width:300, //width must be less than the width of Row(),
      child:Text(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed"
        " do eiusmod tempor incididunt ut labore et dolore magna "
        "aliqua. Ut enim ad minim veniam, quis nostrud "
        "exercitation ullamco laboris nisi ut aliquip ex ea "
        "commodo consequat."),
    )
  ],
)

In case of Column Error, such as "A RenderFlex overflowed by pixels on the bottom", you need to wrap Column() with SingleChildScrollView() widget.

SingleChildScrollView( 
  child:Column(
    children: [
        Container(
          height: 2000,
        )
      ],
    ),
)

Here, SingleChildScrollView() will create a scrollable widget if the child widgets inside it overflowed by the height: