Fixing RenderFlex overflow issues with Flexible

I was recently writing out some layout code in Dart for a Flutter project and was hit with the following error: 'A RenderFlex overflowed by 545 pixels on the right'. This basically means that one of the widgets is too wide/long and overflowing outside of the Container. This issue is actually pretty easy to solve.

I'll start off by posting an example of the layout I was trying to build:

Copycopy code to clipboard
1return Container(
2    margin: EdgeInsets.all(16),
3  padding: EdgeInsets.all(14),
4  child: Row(
5    children: <Widget>[
6      Text("[Insanely long text goes here]")
7    ],
8  )
9);

This layout was for the header of a ListView, as you can see above it is a Row widget wrapped inside a Container widget. I was going to throw in an Icon above the Text before the RenderFlex error threw me off.

Anyway, like I said this is easy to remedy. All you need to do is wrap your Text in a Flexible widget like this:

Copycopy code to clipboard
1return Container(
2    margin: EdgeInsets.all(16),
3  padding: EdgeInsets.all(14),
4  child: Row(
5    children: <Widget>[
6      Flexible(
7        child: Text("[Insanely long text goes here]")
8      )
9    ],
10  )
11);

Once you've done that and applied the changes you shouldn't see the RenderFlex error anymore! And if you're interested in reading more about the Flexible widget you can find the documentation here.