How to change the color of cursor balloon (I don't know what it is called) in Flutter

Question

I am creating this application in flutter where I have this text field. I want to change the color of this cursor balloon but I'm not sure how can I. Any help will be appreciated.

Answer 1

Wrap your textfield widget with a Theme widget and set the textSelectionHandleColor parameter to your desired color.

Theme(
   data: Theme.of(context).copyWith(
     textSelectionTheme: TextSelectionThemeData(
      cursorColor: Colors.red,
      selectionColor: Colors.green,
      selectionHandleColor: Colors.black,
    ), 
   ),
   child: TextFormField(),
);

Or you can make it uniform across you app by setting the theme parameter of the MaterialApp widget like so:

return MaterialApp(
        title: 'App Name',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          textSelectionTheme: const TextSelectionThemeData(
            cursorColor: Colors.red,
                  selectionColor: Colors.blue,
                  selectionHandleColor: Colors.purple,
          ),
          
          //...Other theme color configurations here
        ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );