Как добавить отступ к цвету фона текстового виджета

Question

Я хочу создать текстовый виджет, который достигнет того, что вы видите ниже:

введите описание изображения здесь

Я хочу, чтобы цвет фона текста имел дополнительные отступы, но только там, где на самом деле есть текст.

В настоящее время мне нужно выбирать между обертывание текстового виджета в виджет-контейнер (который затем добавляет цвет фона к пустому пространству второй более короткой строки, что мне не нужно). Или я могу выбрать использование цвета фона для текстового виджета textStyle, но он не учитывает высоту (также известную как line-height).

Есть ли какие-либо способы сделать это?

Answer 1

Вы можете использовать Paint для background из 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,
)

Результат:

img

Answer 2

Для этого вы можете использовать Column() и добавить два Containers() для одного текста сообщения с приведенными ниже спецификациями кода

        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))
              )
            )
          ]
        )

Результат

введите описание изображения здесь