Thread by @biz84

Building a Flutter chat UI with message bubbles like this should be easy right?

Not so fast! 🧵

This layout can be built with a ListView that contains some message bubbles.

Each bubble is a Row that holds a DecoratedBox (with a child Text) and a Spacer (or viceversa).

The text expands horizontally in one line and the bubble adjusts accordingly.

Here's how the message bubble looks in code:

But if the screen is narrow and the message bubble doesn't fit within the available width, the text doesn't wrap over multiple lines and we get an error:

A RenderFlex overflowed by 31 pixels on the right.

The debugger will suggest applying a flex factor (e.g. using an Expanded widget). But that doesn't quite work.

As we can see with the Widget Inspector, the real problem is that the Text widget (and the parent DecoratedBox) have an *unconstrained width*.

How to fix this?

Well, we can use a ConstrainedBox to specify the maximum width of the DecoratedBox.

And that maximum width can be obtained with a LayoutBuilder widget.

Here's the code:

And here's the working sample with the fixed layout (note how the text now wraps over multiple lines):

TL;DR:

- Text widgets will only wrap over multiple lines if they have a **constrained** width
- but this doesn't happen by default when they're placed inside a Row
- ConstrainedBox comes to the rescue by providing a maximum width (that can be obtained from a LayoutBuilder)

Want more tips like this on your timeline?

Then just follow me: @biz84

Happy coding!