Set the color of selected text - flutter

Question

I'm setting up the theme for my app and I want to go with a minimalistic black & white color palette. For that I want the text to look black in a normal state and white when it's selected with the selection color being black.
So far I have found a way to set the selection color to black but now it just blends with the text because the color of the selected text stays black too. Is there a way to set the color of selected text?
TemeData(
textSelectionTheme: TextSelectionThemeData(
cursorColor: Colors.black,
selectionColor: Colors.black,
),
);
What I want:

Answer 1

I haven't found anything in the Flutter library, but you can try to use this Widget:
class SelectableColoredText extends StatefulWidget {
final String text;
final TextStyle? style;
final Color selectedColor;
final Color selectedBackgroundColor;
const SelectableColoredText(this.text, {
Key? key,
this.style,
required this.selectedColor,
required this.selectedBackgroundColor,
}) : super(key: key);
#override
_SelectableColoredTextState createState() => _SelectableColoredTextState();
}
class _SelectableColoredTextState extends State<SelectableColoredText> {
int? _start;
int? _end;
#override
Widget build(BuildContext context) {
final int start = _start ?? widget.text.length;
final int end = _end ?? widget.text.length;
return SelectableText.rich(
TextSpan(
style: widget.style ?? Theme.of(context).textTheme.bodyText2,
children: [
// Text before the selection
TextSpan(text: widget.text.substring(0, start)),
// Selected text
TextSpan(
text: widget.text.substring(start, end),
style: TextStyle(
color: widget.selectedColor,
backgroundColor: widget.selectedBackgroundColor,
),
),
// Text after the selection
TextSpan(text: widget.text.substring(end, widget.text.length)),
],
),
// Update the start and end positions of the selection
onSelectionChanged: (selection, _) {
final int newStart = min(selection.baseOffset, selection.extentOffset);
final int newEnd = max(selection.baseOffset, selection.extentOffset);
if (_start == newStart && _end == newEnd) return;
setState(() {
_start = newStart;
_end = newEnd;
});
},
);
}
}
You can use it like that:
SelectableColoredText(
'The quick brown fox jumps over the lazy dog',
// The default text style
style: TextStyle(fontSize: 40, color: Colors.black),
// The color of the selected text
selectedColor: Colors.white,
// The background color of the selected text
selectedBackgroundColor: Colors.black,
)

Answer 2

Sett the textSelectionColor for its ThemeData.