Colorize only a part of a TextForm text

Question

I was wondering if there was a way to customize a TextFormField with more accuracy. I don't want to change the whole text color, but only part of it. For instance, below is the above mention TextFormField and I want to highlight "には" (ie what is between curly braces) by adding a red color. I would like to avoid creating multiple TextFormFields to do this because it will be a mess to assemble the text afterwards but I don't know if it is possible.

WARNING I am not looking for the RichText widget since I want to customize a TextFormField Widget or any Widget with an editable text. This Widget is used in a List so I would like not to use a "preview" widget with my input widget.

AND

I don't need a full RichTextEditor since the User should not be able to modify the color. Only parts between curly braces should automatically be colorised.

Looking forwards to see what kind of solutions you guys could come up with !

Does this answer your question? [Display a few words in different colors in Flutter](https://stackoverflow.com/questions/50551933/display-a-few-words-in-different-colors-in-flutter) — Alok, Aug 02 '20 at 09:33
Not really, sorry. I want to customize something that is mutable ie a TextFormField. By using a RichText, I cannot edit the text anymore and I would like to avoid using a different "display" widget since this TextFormField is in a list and it would be messy to have each time a "preview" and an input — Jpec, Aug 02 '20 at 10:34

Jpec · Accepted Answer · 2020-08-02T11:40:27.540

I've finally found a gist that match my request. For those who are searching an answer to my question, you seems to have to override EditableText (How to change color of particular text in a text field dynamically?). But, it's only a draft and it is not working correctly as for today. I'll try to follow this path and add my answer on this post.

EDIT:

The only thing you have to change to this answer is the following:

  @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);
  }
}

Explanation: You simply have to correct the buildTextSpan part. The error was raised when you delete a character because the Range could raise an exception when the range end was not meet.

score 0 · Answer 2 · answered Aug 02 '20 at 09:23

0

This might not be exactly what you want, but may be this can help you get started in a way.

Use RichText widget.

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(),
    ],
  ),
 );

answered Aug 02 '20 at 09:23

Anirudh Bagri

2,346
1
21
33

Thanks for the reply ! Yeah, I know already about this useful Widget but in my case, I need an editable text, not just an immutable one. I would like to avoid using a "preview" text above the input which could have use a RichText to customize the color accordingly – Jpec Aug 02 '20 at 10:31

Colorize only a part of a TextForm text

2 Answers2