Раскрашиваем только часть текста TextForm

Question

Мне было интересно, есть ли способ настроить TextFormField с большей точностью. Я не хочу менять цвет всего текста, а только его часть. Например, ниже приведено вышеупомянутое поле TextFormField, и я хочу выделить "ã" ã ¯ " (т.е. то, что находится между фигурными скобками), добавив красный цвет. Я бы не хотел создавать для этого несколько полей TextFormField, потому что потом будет сложно собрать текст, но я не знаю, возможно ли это.

ПРЕДУПРЕЖДЕНИЕ. Я не ищу виджет RichText, так как хочу настроить виджет TextFormField или любой виджет с редактируемым текстом. Этот виджет используется в списке, поэтому я не хотел бы использовать виджет "предварительного просмотра" с моим виджетом ввода.

А ТАКЖЕ

Мне не нужен полноценный RichTextEditor, поскольку пользователь не может изменять цвет. Только части между фигурными скобками должны автоматически раскрашиваться.

Ждем вперед, чтобы увидеть, какие решения вы, ребята, можете придумать!

Answer 1

Я наконец нашел суть, которая соответствует моему запросу. Для тех, кто ищет ответ на мой вопрос, кажется, вам нужно переопределить EditableText ( как динамически изменять цвет определенного текста в текстовом поле?). Но это всего лишь черновик и на сегодняшний день работает некорректно. Я постараюсь пойти по этому пути и добавить свой ответ в этот пост.

РЕДАКТИРОВАТЬ:

Единственное, что вам нужно изменить для этого ответа, это следующее:

  @override
  TextSpan buildTextSpan() {
    final String text = textEditingValue.text;
    int textLength = text.length;
    if (widget.annotations != null && textLength > 0) {
      var items = getRanges();
      var children = <TextSpan>[];
      for (var item in items) {
        if (item.range.end < textLength) {
          children.add(
            TextSpan(style: item.style, text: item.range.textInside(text)),
          );
        } else if (item.range.start <= textLength) {
          children.add(
            TextSpan(
                style: item.style,
                text: TextRange(start: item.range.start, end: text.length)
                    .textInside(text)),
          );
        }
      }
      return new TextSpan(style: widget.style, children: children);
    }

    return new TextSpan(style: widget.style, text: text);
  }
}

Объяснение: Вам просто нужно исправить часть buildTextSpan. Ошибка возникла при удалении символа, потому что диапазон мог вызвать исключение, когда конец диапазона не совпадал.

Answer 2

Возможно, это не совсем то, что вам нужно, но, возможно, это поможет вам начать работу.

Используйте виджет RichText.

var text = new RichText(
  text: new TextSpan(
    style: new TextStyle(
      fontSize: 10.0,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Text1'),
      new TextSpan(text: 'Text2', style: new TextStyle(),
    ],
  ),
 );