How to add padding to background color of text widget

user_1969091 0
Viewed 5375

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

enter image description here

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?

flutter-layout dart flutter
3 Answers

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:

img

user_99027650

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

enter image description here

user_53625830

Both of the answers are hacks which don't scale well with larger text at all. Therefore I wrote a package which is now capable to add a padding, radius and color to the text background.

Here is an image of what exactly the text of the package can do: enter image description here

The link of the package is following: https://github.com/Letalus/auto_size_text_background

user_98746110
Related