flutterdartandroid-cursor

How change the bottom leaf color of the cursor in flutter


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

Solution

  • 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!