CODEWITHSUNDEEP
flutterdartflutter-layout
Hamza
Hamza

Reputation: 355

How to change selected text color locally - flutter

Text selection color can be changed by globally setting the theme:

    theme: ThemeData.light().copyWith(
        accentColor: kPrimaryAccent,
        primaryColor: kPrimaryColor,
        textSelectionColor: kTextSelectionColor,
        textSelectionHandleColor: kPrimaryAccent)

But how can this be done locally in a single text-field?

Upvotes: 8

Views: 12436

Answers (2)

Mobina
Mobina

Reputation: 7109

[update] You can wrap your widget with a Theme and set the textSelectionTheme for its ThemeData:

Container(
  child: Theme(
    data: ThemeData(
      textSelectionTheme: TextSelectionThemeData(
        selectionColor: AppColors.accent,
      ),
    ),
    child: SelectableText(
      'this is a text',
    ),
  ),
),

Or just add textSelectionTheme to your ThemeData class if you use some.

Upvotes: 2

rekire
rekire

Reputation: 47945

Since the property mentioned in Mobina answer become deprecated, here is how you do it in early 2022:

Container(
  child: Theme(
    data: ThemeData(
      textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.yellow,
        selectionColor: Colors.green,
        selectionHandleColor: Colors.blue,
      )
    ),
    child: SelectableText(
      'this is a text',
    ),
  ),
),

Source: TextSelectionTheme migration

Upvotes: 9

Related Questions