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 text color to match your design. So in this tutorial, we’ll see how to change TextField text color in Flutter.
Here’s how it looks after changing color:

Here’s what we’ll cover:
- Steps to change TextField text color in Flutter
- Changing TextField text color globally
- Different ways of adding color
Steps to change TextField text color in Flutter
You can change TextField text color in Flutter, by adding style to the TextField widget. Basically, you provide the styling instructions by using the TextStyle widget.
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 style
parameter and assign the TextField
widget.
Step 3: Inside the TextField
widget, add the color
parameter and set the color of your choice.
Code Example
TextField( style: TextStyle(color: Colors.pinkAccent), //<-- SEE HERE ),
Changing TextField text color globally
In the previous section, we saw how to change the TextField text 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 text color at the app level.
You can change the TextField text color globally by defining the TextTheme
and then adding subtitle1
parameter to it. Finally, you can assign the TextStyle
width with the color of your choice.
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 textTheme
parameter and then assign the TextTheme
.
Step 4: Inside the TextTheme
add the subtitle1
parameter and then assign the TextStyle
.
Step 5:Inside the TextStyle
add the color
parameter and provide the color.
Code Example
MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, inputDecorationTheme: const InputDecorationTheme( textTheme: TextTheme( subtitle1: TextStyle(color: Colors.pinkAccent), //<-- SEE HERE ), ), home: ChangeTextFieldColorDemo(), );
Output

Different ways of adding color
There are main three ways you can add color to the TextField text widget.
Colors.red
: This is used to define from the predefined colors.Color(0xffF02E65)
: This is used to have a custom color.Color.fromARGB(255, 66, 125, 145)
: This is used to have color from the alpha, red, green, and blue color combination.
Code Example
TextField( style: TextStyle(color: Colors.pinkAccent), ), TextField( style: TextStyle(color: Color(0xffF02E65)), ), TextField( style: TextStyle(color: Color.fromARGB(255, 66, 125, 145)), ),
Conclusion
In this tutorial, we learned how to change TextField text 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?