Search code examples
flutterdarttextfield

How to change the selection handle color in Flutter?


In Flutter, when you select text, two blue dots appear at the beginning and end of the selection. I'd like to change these dots to grey.

What I mean is this:

enter image description here

Do I need to edit this line?:

selectionHandleColor: Colors.grey,

Can I achieve this by editing the selectionHandleColor property within TextSelectionTheme? If so, what value should I use to set the color to grey?

Here's the relevant part of my code:


import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return TextSelectionTheme(
      data: TextSelectionTheme.of(context).copyWith(
        selectionHandleColor: Colors.grey, 
      ),
      child: TextField(/* ... */),
    );
  }
}



Solution

  • Wrap the textfield with a Theme widget. And in data add

    ThemeData.light().copyWith(
      textSelectionHandleColor: Colors.green,
    );