Fultter: How to change color of all text before a particular character in TextField?

Question

I am trying to create a TextField Widget in Flutter App in which I want to allow the user to insert a text string like this:

USER-0123456789

In which the text USER (All Text before '-' character) should be in red color and other should be in black color.

Now the problem is that I don't know any method to do this. After some research, I found that I can do this with a normal Text Widget by using RichText Widget. But, I don't know any similar widget for TextField Widget. Please help me to come out of this situation.

The solution in this link is to color the specific keywords. But, I don't have any specific keywords like word "Apple". The text "USER" can be anything and of any length. It will be very helpful if you tell me how to do it in my case. — ankushalg, Feb 22 '20 at 13:53
use `String.indexOf()` method to find an index of `'-'` character and return valid `TextSpan` — pskink, Feb 23 '20 at 09:40
Sorry for very late response, but Internet is shut down for a week in my area by the government. — ankushalg, Feb 29 '20 at 15:00
Now come to Question, I don't have much experience with Regular Expressions and Flutter. I am beginner here in Flutter. — ankushalg, Feb 29 '20 at 15:01
I tried to implement the logic and end up with a solution to use two text field instead of one. As I want a lot of customization. It really works good but doesn't looks like what I really want to achieve. Can you give an example for the same? — ankushalg, Feb 29 '20 at 15:04
In the example you shared previously, There is a method called splitMapJoin is used in which we pass a pattern. I don't understand how to create that pattern for my case? — ankushalg, Feb 29 '20 at 15:09
you dont need any `splitMapJoin` and any `RegExp` - all you need is `String.indexOf('-')` inside `buildTextSpan` method — pskink, Feb 29 '20 at 15:10
basically if your text contains '-' you return `TextSpan` with two `children:` and if it does not you return `TextSpan` with `text:` only — pskink, Mar 01 '20 at 11:51

ankushalg · Accepted Answer · 2020-12-18T13:34:33.357

5

I am able to solve the Question by using an if statement to create two TextSpan as suggested by pskink.

The MyTextController Class:

class MyTextController extends TextEditingController {
  @override
  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
    List<InlineSpan> children = [];
    if(text.contains('-')){
      children.add(TextSpan(style: TextStyle(color: Colors.redAccent), text: text.substring(0, text.indexOf('-'))));
      children.add(TextSpan(text: text.substring(text.indexOf('-'))));
    } else {
      children.add(TextSpan(style: TextStyle(color: Colors.redAccent), text: text));
    }
    return TextSpan(style: style, children: children);
  }
}

Usage in TextFormField:

TextFormField(
    keyboardType: TextInputType.text,
    controller: MyTextController(),
),

Update regarding cursor misplacement bug : I am unable to find a solution for this bug. If I find it in near future, I will update it here. What I did is, just hide the cursor itself so that it can't be noticed.

edited Dec 18 '20 at 13:34

answered Mar 01 '20 at 12:26

ankushalg

523
3
23

Hey @pskink! All of this working perfectly but it has some issues in display multiple text spans. All text shifted downward to certain pixels whenever multiple TextSpans are added in TextField. It seems Ok and text is in center of the TextField till I enter - in the TextField. when I do that, It shows two textspans and which are not in center. they shifted downside. I don't know why this is happening? – ankushalg Mar 03 '20 at 13:30
and also cursor also seems misplaced. it shows in starting. – ankushalg Mar 03 '20 at 13:31
I have no idea what you mean – pskink Mar 03 '20 at 13:32
This all error only occur when Two TextSpans are added instead of one in TextField. – ankushalg Mar 03 '20 at 13:34
Solved it by using TextAlignVertical – ankushalg Mar 03 '20 at 14:05
Sorry Dude, I didn't find any solution for cursor problem. I just hide it as it doesn't needed in my particular use case. – ankushalg Dec 17 '20 at 00:33

Fultter: How to change color of all text before a particular character in TextField?

1 Answers1