在 RichText 小部件中向 TextSpan 背景添加额外的填充

Question

I have a RichText with some TextSpan . I want one of the TextSpan widgets to have a background on it so I used background: Paint()..color = Colors.redAccent as its text style.

Is there a way to add some extra red space/padding to the background.

This is how it currently looks:

This is how I want it to look (notice the extra red on the top and bottom of the highlighted text):

This is the code used:

Scaffold(
  appBar: new AppBar(),
  body: new RichText(
    text: new TextSpan(
      text: 'This is a one the lines in the span \n ',
      style: TextStyle(fontSize: 15.0, color: Colors.black),
      children: <TextSpan>[
        new TextSpan(
            text: 'This is the second line',
            style: new TextStyle(fontWeight: FontWeight.bold)),
        new TextSpan(
            text: ' background on me ',
            style: new TextStyle(
              fontWeight: FontWeight.bold,
              background: Paint()..color = Colors.redAccent,
            )),
        new TextSpan(text: ' This is another of the lines in the span!'),
      ],
    ),
  ), // This trailing comma makes auto-formatting nicer for build methods.
)

I tried adding height to the text style, but it doesn't affect the height of the background.

Answer 1

The new solution in 2019 with flutter 1.7.8 is WidgetSpan , you could just add a Container and a Padding or any combination of widget to make more variety!

Here is an example to use on the case:

WidgetSpan(
  child: Container(
    color: Colors.red,
    padding: EdgeInsets.all(8.0),
    child: Text("background on me", style: ...),
  )
)

And don't forget to change <TextSpan>[] to <InlineSpan>[] , that's It!

Answer 2

Quite ugly solution, but I haven't found other (

TextStyle(fontWeight: FontWeight.bold,
  background: Paint()..color = Colors.redAccent
    ..strokeWidth = 16.5
    ..style = PaintingStyle.stroke,)

strokeWidth have to be big enough to cover height of text. In my case 16.5 is minimal suitable value

Answer 3

you can use widgetSpan that inside RichText so that you can add any widget inside RichText.

RichText(
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          text: TextSpan(
            text: "text one", // text of exemple
            children: [

              // add a space between texts
              WidgetSpan(
                child: Padding(
                  padding: const EdgeInsets.only(left: 10.0),
                ),
              ),

              TextSpan(
                text: "text two", // text exemple
              ),
            ],
          ),
        ),

Answer 4

You could use the Padding class.

Maybe this question's answer can help you.