change the selected text color of the TextField flutter

user_13833108 0
Viewed 809

is there any way to change the selected text color inside a TextField in Flutter? I tried using the controller itself but no much properties to play around with.. Here's a sample of what I want

enter image description here

is there any way to achieve this behavior?

flutter textfield colors user-interface
3 Answers

Use TextSpan widget, below a perfect recreation of your sample image

RichText(
    text: TextSpan(
      // set the default style for the children TextSpans
      style: Theme.of(context).textTheme.body1.copyWith(fontSize: 30),
      children: [
        TextSpan(
            text: 'Hello, ',
        ),
        TextSpan(
          text: 'Wor',
          style: TextStyle(
            color: Colors.blue
          )
        ),
        TextSpan(
            text: 'ld',
        ),
      ]
    )
  )
user_111777940

Within a TextField this would already become difficult, because you do not know what the user enters. If you are talking about a Text field, you can use RichText

RichText(
        text: TextSpan(
          // set the default style for the children TextSpans
          style: Theme.of(context).textTheme.body1.copyWith(fontSize: 30),
          children: [
            TextSpan(
                text: 'Styling ',
            ),
            TextSpan(
              text: 'text',
              style: TextStyle(
                color: Colors.blue
              )
            ),
            TextSpan(
                text: ' in Flutter',
            ),
          ]
        )
      )
user_136482050

I think what you're looking for is a rich text editor or text field, I don't think flutter supports that out of the box. there are a few libs on pub best I found are zypher or creamy_field zypher is being re-written on the pre-release might wanna watch out for that

user_53463880
Related