Граница вокруг textSpan из RichText

Question

У меня есть RichText виджет, который содержит TextSpan. Вокруг TextSpan виджета, я хочу разместить вокруг него границу. Кроме того, я хочу, чтобы это работало в Интернете, но в настоящее время из моего метода это работает только на мобильных устройствах.

Ожидаемое: я хочу добиться следующего. enter image description here">

Результат с использованием этого кода:

    Paint paint = Paint()
  ..color = Colors.blue
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round
  ..strokeWidth = 2.0;

RichText(
   text: TextSpan(children: [
       TextSpan(text: text1),
       TextSpan(text: text2, style: TextStyle(background: paint)),
       TextSpan(text: text3, )
  ]))

пожалуйста, помогите !!!

Если это не ясно, проще говоря, я просто хочу обвести рамку вокруг выделенной части и убрать выделение на рисунке ниже, не меняя ничего другого

Answer 1

Так как проблема опа происходит в сети, из-за ошибки в самой флаттер-сети, это не может быть решено в настоящее время. Однако следующий ответ содержит обобщенное решение c, которое должно работать во флаттере после его исправления.

Новый ответ: 04.03.2020 В порядке для достижения желаемого эффекта есть опция с именем blendMode, для которой вам нужно BlendMode.difference в объекте Paint. Вы можете использовать это для достижения результата, аналогичного желаемому.

Код для того же

 TextSpan(
          style: TextStyle(
            background: Paint()
              ..color = Colors.blue
              ..style = PaintingStyle.stroke
              ..strokeWidth = 2.0
              ..strokeJoin = StrokeJoin.bevel
              ..blendMode = BlendMode.difference,
          ),
          text:
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        ),

Примечание: Я также пробую другой кропотливый способ ручного рисования границ только ради этого. Если вы столкнулись с некоторыми другими решениями, пожалуйста, поделитесь им здесь. :) Надеюсь, это поможет вам.

Старый ответ

Поэтому в зависимости от контекста времени выполнения я переключаю стиль текста. Для сети это передает список TextDecorations как underline и overline. Это не касается концов текста, но я считаю, что лучше, чем полностью выделенный текст, как в ваших результатах. Есть несколько дополнительных опций, таких как decorationThickness и decorationStyle, с которыми можно повозиться.

Вот как выглядит решение в режиме флаттера.

Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 1.0;

    return RichText(
      text: TextSpan(
        children: [
          TextSpan(text: 'bounded text1'),
          TextSpan(
            text: ' Will this work ',
            style: kIsWeb
                ? TextStyle(
                    decoration: TextDecoration.combine(
                        [TextDecoration.overline, TextDecoration.underline]),
                    decorationColor: Colors.blue,
                  )
                : TextStyle(
                    background: paint,
                  ),
          ),
          TextSpan(
            text: 'bounded text 3',
          )
        ],
      ),
    );

Я бы выделил эти стили в константу и динамически применил бы их на основе текущего рабочего контекста, такого как android или web. Надеюсь, это поможет.

Answer 2

Вы можете использовать текст внутри контейнера вот так

return Container(
        margin: const EdgeInsets.all(30.0),
        padding: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
    border: Border.all(),
  ), 
        child: Text(
          "text",
          style: TextStyle(fontSize: 30.0),
        ),
      );