Flutter - Text with space breaks background color

user_1274440 0
Viewed 56

Text with whitespace and background color does not apply the background color for the whitespace part.

Please see the following screenshot: enter image description here

I would expect the whitespace to be colorized with a red background as well, instead, it increases the width of the parent container without applying the background color.

Here is a live playground link

Question:

Is there a way to fix this?

flutter
2 Answers

Seems like all spaces on right has been removed for nth(i don't know yet) reason, Currently I am able to solve with RichText with adding extra transparent char.

Container(
  color: Colors.blue,
  child: Text.rich(
    TextSpan(
      text: "hi           ",
      style: TextStyle(
        backgroundColor: Colors.red,
        fontSize: 250.0,
      ),
      children: [
        TextSpan(text: "a", style: TextStyle(color: Colors.transparent))
      ],
    ),
  )),

It takes extra single space,

user_101571270

One thing You can do is set text background color to transparent and give the main color to container.

user_103069970
Related