Question 294334 in Flutter Question posted in
The official Flutter documentation can be found here.

Change TextField cursor bottom indicator in Flutter

I want to change cursor color, completely. I have added following code:

TextField(
  ...
  cursorColor: myBlueColor,
)

However, this does not change bottom indicator (when you select part of the text/text position) – it is still purple:

enter image description here

Can somebody help how to achieve this? I am using Flutter 3.16.0.

Tags:

3

Answers


  1. 0

    In your MaterialApp, you can change the selectionHandleColor for the TextSelectionThemeData:

    theme: ThemeData(
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Colors.red,
    selectionColor: Colors.green,
    selectionHandleColor: Colors.black,
  ),
)
    Login or Signup to reply.
  2. 0

    Change the primarySwatch color of ThemeData in MaterialApp of your root widget tree:

     MaterialApp(
   title: 'Flutter Demo',
   theme: ThemeData(
     primarySwatch: Colors.green,
   ),
    ...
 )
    Login or Signup to reply.
  3. 0

    You will need to modify the ThemeData of your app which can be done either by wrapping your app with a Theme widget, or by setting the theme property of the MaterialApp widget. Here is a sample as how you can use the latter mentioned approach to achieve your requirement:

    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.red,
        textSelectionTheme: TextSelectionThemeData(
          cursorColor: Colors.red, // Change the cursor color. Change red to blue or as per your requirement
          selectionHandleColor: Colors.red, // Change the selection handle color
          selectionColor: Colors.red.withOpacity(0.5), // Change the text selection color
        ),
      ),
// ...Rest of code

    DARTPAD DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search