CODEWITHSUNDEEP
flutterdart
NearHuscarl
NearHuscarl

Reputation: 81430

Flutter - No breaking words into newline at hyphen in Text

How can I stop breaking word into newline at hyphen character. Here is the relevant code

Container(
  color: Colors.red.withOpacity(.4),
  width: 315,
  padding: const EdgeInsets.symmetric(
    horizontal: 12.0,
    vertical: 6.0,
  ),
  child: Text(
    'Ultra Low-Fat',
    style: Theme.of(context).textTheme.display1,
  ),
)

Currently the screen looks like this

enter image description here

But I want the text to show like this

Ultra
Low-Fat

Upvotes: 6

Views: 3303

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81430

I managed to solve this by replacing all hyphens with non-breaking hyphen character \u2011

const nonBreakingHyphen = '\u2011';

...

Text(
  // text will now not break at hyphen
  title.replaceAll('-', nonBreakingHyphen),
)

Upvotes: 9

Swapnil Nakade
Swapnil Nakade

Reputation: 860

You can do this

child:Column(
    children:<widgets>(
         Row(
            children:<widgets>(
                Text("Ultra", //your theme)),
         Row(
            children:<widgets>(
                Text("Low-Fat", //your theme)
            )
        )
    )

Upvotes: 0

Related Questions