Блог

Главная - Вопросы по программированию - Возможно ли получить пользовательский фон вокруг трепетания текста?

Возможно ли получить пользовательский фон вокруг трепетания текста?

#flutter #dart #instagram

#трепетание #dart #Instagram

Вопрос:

Я хочу, чтобы вокруг текста был фон, подобный видеороликам Instagram stories / tiktok. С пользовательским borderradius и цветом. Но когда я вижу, что для текста есть только цвет фона. Но это дает такой результат: введите описание изображения здесь

Я хочу этот результат:

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

Если использовать RichText с WidgetSpan, я получаю это:

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

Но я хочу, чтобы он обтекал текст, а не то, что контейнер представляет собой поле

Это код для последнего скриншота:

  child: RichText(
text: WidgetSpan(
  child: Container(
    padding: EdgeInsets.all(6),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(4),
      color: Colors.blueAccent
    ),
    child: Text(
      providerItems.textItems[id].text   ' | '   providerItems.textItems[id].id.toString(),
      textAlign: TextAlign.center,
      style: TextStyle(
        //backgroundColor: Colors.blueAccent,
        fontWeight: FontWeight.w500,
        color: Colors.white,
        fontSize: 26,
        //backgroundColor: Colors.blue
      ),
    ),
  )
),

),

Комментарии:

1. Можете ли вы опубликовать какой-нибудь код, чтобы продемонстрировать, как создается текст?

2. @kazume я опубликовал код

3. Мне кажется, что для получения такого эффекта вам придется создать что-то самостоятельно — по крайней мере, я не знаю ни одного виджета, который мог бы дать вам именно такой эффект. Думаю, CustomMultiChildLayout или что-то в этом роде.

Ответ №1:

Это может помочь:

Вы можете установить фон, как показано ниже:

 TextStyle(
 fontWeight: FontWeight.w600,
 fontSize: 10,
 background: Paint()
       ..strokeWidth = 12
       ..color = Colors.grey
       ..style = PaintingStyle.stroke
       ..strokeJoin = StrokeJoin.round
),

Но если вы уменьшите strokeWidth , у вас останется пустое пространство во внутренней области, поскольку оно равно ширине внешнего штриха.