how to disable the original text background color when selecting text in SelectableText.rich-CodePudding

Is there some way to disable the original text background color when selecting text in SelectableText.rich. Otherwise the original background color(amber for example) is still there, which is different from the selected text background color (blue), and thus making it look like it is not selected.

CodePudding user response：

Wrap it with theme and give it color i hope it helps

Theme(
     data: ThemeData(textSelectionColor: Colors.green),
          child: SelectableText.rich(
              
           ),
  ),

CodePudding user response：

You need to set your select color first in ThemeData like this:

MaterialApp(
        theme: ThemeData(
          // use textSelectionTheme and set your needed color instead
          textSelectionTheme: TextSelectionThemeData(
            selectionColor: Colors.amber,
          ),
        ),
      ),

Now you can select by your needed color if you want to change your SelectableText.rich setting like this:

const SelectableText.rich(
      TextSpan(
        children: [
          TextSpan(text: 'test ', style: TextStyle(color: Colors.black)),
        ],
      ),
      toolbarOptions: ToolbarOptions(cut: true), // tools like copy, paste can be enable here
      enableInteractiveSelection: true, // you can enable select color interactive here
      cursorColor: Colors.red, // this is an option if you want change cursor color 
    ),

if need to use just this SelectableText.rich with specific color just wrap your SelectableText.rich with theme:

Theme(
      data: ThemeData(
        textSelectionTheme: const TextSelectionThemeData(
          selectionColor: Colors.amber,
          // selectionColor: Colors.transparent, // it can make select color transparent that you need
        ),
      ),
      child: const SelectableText.rich(
        TextSpan(
          children: [
            TextSpan(text: 'test ', style: TextStyle(color: Colors.black)),
          ],
        ),
        toolbarOptions: ToolbarOptions(cut: true),
        enableInteractiveSelection: false,
        cursorColor: Colors.red,
      ),
    ),