2 min read

The TextField widget in Flutter is one of the most used widgets. It is used to accept the input from users. After adding the TextField you may want to change its cursor color to match your design. So in this tutorial, we’ll see how to change TextField cursor color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

Steps to change TextField cursor color in Flutter

To change TextField cursor color in Flutter, simply add the cursorColor property and set the color of your choice.

Here is the step by step instructions:

Step 1: Locate the file where you have placed the TextField widget.

Step 2: Inside the TextField widget, add the cursorColor parameter and set the color of your choice.

Step 3: Run the app

Code Example

TextField(
  cursorColor: Colors.redAccent, //<-- SEE HERE
),

Changing TextField cursor color globally

In the previous section, we saw how to change the TextField cursor color at the page level. but sometimes you might be looking to have a common style across all the pages of your app. In that case, you might want to change the TextField cursor color at the app level.

You can change the TextField cursor color globally by defining the TextSelectionThemeData and then adding cursorColor property.

Here’s how you do it:

Step 1: Locate the MaterialApp widget.

Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned.

Step 3: Inside the ThemeData add the textSelectionTheme parameter and then assign the TextSelectionThemeData.

Step 4: Inside the TextSelectionThemeData add the cursorColor parameter and provide the color.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: Colors.red, //<-- SEE HERE
    ),
  ),
  home: ChangeTextFieldColorDemo(),
);

Different ways of adding color

There are main three ways you can add color to the TextField cursor widget.

  1. Colors.red: This is used to define from the predefined colors.
  2. Color(0xffF02E65): This is used to have a custom color.
  3. Color.fromARGB(255, 66, 125, 145): This is used to have color from the alpha, red, green, and blue color combination.

Code Example

TextField(
  cursorColor: Colors.redAccent,
),
TextField(
  cursorColor: Color(0xffF02E65),
),
TextField(
  cursorColor: Color.fromARGB(255, 66, 125, 145),
),

Conclusion

In this tutorial, we learned how to change TextField cursor color in Flutter with practical examples, we first saw how to change the color at the page level and then explored the way to change color at the app level. Finally, we also learned what are the different ways to add colors.

Would you like to check other interesting Flutter tutorials?

Change TextField Underline Color in Flutter  – RIGHT Way [2022]
Change TextField Background Color in Flutter  – RIGHT Way [2022]