Allow text wrap only at word boundaries in Flutter

Question

I'm having some troubles with Flutters Text widget wrapping the text at odd locations if there isn't enough space to display it in a single line:

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
       Text("Ready to Grow? Click to join the Tribe!",
       style: Theme.of(context).textTheme.headline2,
       textAlign: TextAlign.center,
       )
    ],
  ),
)

In certain situations my text wraps as follows:

Ready to Grow? Click to join the Tribe
!

This looks quite ugly and I would like Flutter to wrap the line only at white spaces - how can I achieve that? I already tried softWrap and the overflow property but they don't seem to have any impact on the described behaviour...

Real world screenshot (notice the trailing "!" at the very bottom):

Answer 1

I find it quite interesting that you would ask this question, because I've seen a lot of people complaining about the opposite! In general, Flutter is very aggressive about "only wrap words at boundaries", almost too strict, so usually the complain I hear is: "how to make Flutter change line mid-word".

To demonstrate what I mean, look at the following GIF:

From the GIF, we can observe that, Flutter already treats "text!" and "boundaries!" as single words. It tries its best to avoid breaking between the letters and the "!" mark. When needed, it puts the whole word "boundaries!" into its own line.

However, when the screen size is too narrow, it cannot possibly fix the whole word (again, "boundaries!" is treated as a single one word), it will have to break it. Depending on the screen size, line break could happen at any point.

So overall, Flutter is doing a pretty great job on this regard. You could try to design your UI and draft your copy in a way that avoid using words that are longer than a typical screen width.