CODEWITHSUNDEEP
flutterflutter-layoutflutter-web
schneida
schneida

Reputation: 809

Allow text wrap only at word boundaries in Flutter

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):

Real world screenshot showing the issue

Upvotes: 0

Views: 1146

Answers (1)

WSBT
WSBT

Reputation: 36383

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:

demo 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.

demo picture

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.

line breaking for word bou-ndaries!

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.

Upvotes: -1

Related Questions