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

Question

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.

Answer 1

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

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

Answer 2

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,
          ),
        ),
      ),

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 or make that backgroundColor: Color.transparent 
        ),
      ),
      child: const SelectableText.rich(
        TextSpan(
          children: [
            TextSpan(
              text: 'test ',
              style:
                  TextStyle(color: Colors.black, backgroundColor: Colors.amber 
                  // this backgroundColor make the white backcolor into amber
                ),
            ),
          ],
        ),
        toolbarOptions: ToolbarOptions(cut: true), // tools like copy, paste 
        enableInteractiveSelection: false, // you can enable select color 
        cursorColor: Colors.red, // this is an option if you want change 
      ),
    ),