How to add padding to background color of text widget

Question

I want to create a text widget the achieves what you see below:

I want the background color of the text to have some extra padding, but only where there is actually text.

Currently, I have to choose between wrapping the text widget in a container widget (which then adds a background color to the empty space of a second shorter line, which I do not want). Or, I can choose to use background color for the texts' textStyle widget, but it does not respect the height(aka line-height).

Are there any ways of accomplishing this?

Answer 1

You can use a Paint for the background of TextStyle:

Text(
  'Random caption for this post1',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    background: Paint()..color = Colors.white
    ..strokeWidth = 17
    ..style = PaintingStyle.stroke,
  ),
  textAlign: TextAlign.center,
)

Result:

Answer 2

For doing this, you can use Column() and add two Containers() for a single post text, with the below code specifications

        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //this is first container
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.white),
                borderRadius: BorderRadius.circular(10.0)
              ),
              child: Padding(
                padding: EdgeInsets.all(10.0),
                child: Text("This is the dummy text for", style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold))
              )
            ),
            
            //this is second container
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.white),
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0))
              ),
              child: Padding(
                padding: EdgeInsets.all(10.0),
                child: Text("post 1", style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold))
              )
            )
          ]
        )

Result