How change the bottom leaf color of the cursor in flutter

50 Views Asked by At

Image of the bottom leaf of the cursor

In the following code, I want to change that blue leaf color to black (have attached the image) I know how to change the cursor color but how to change this leaf color? I am not even sure that's the correct name for that

Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 38),
                  child: TextField(
                    cursorColor: Colors.black,
                    style: const TextStyle(
                      color: Colors.black54,
                      fontFamily: 'sen',
                      fontSize: 15,
                    ),
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: "Type Message",
                      hintStyle: TextStyle(
                        color: Colors.black54,
                        fontFamily: 'sen',
                        fontSize: 15
                      )
                    ),
                  ),
                ),
              ),
1

There are 1 best solutions below

1
GiuseppeFn On BEST ANSWER

The blue leaf you are talking about is called Text selection handle, the funny name you gave to it is probably the reason you didn't find a way to change the color.

  1. The first way to change it is defining the primary color in the material app, but I'd rather not do it, as it could be used for other purposes
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
        colorScheme: const ColorScheme.dark(
          primary: Colors.yellow, 
        ),
      ),
      home: ...
    );
  }
}
  1. The actual way to do it is defining the TextSelectionThemeData
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
        textSelectionTheme: const TextSelectionThemeData(
          selectionHandleColor: Colors.yellow
        )
      ),
      home: ...
    );
  }
}

Hope that helps!