Change Text Color in Flutter  –  The RIGHT Way [2023]

The Text widget in Flutter is one of the most used widgets. It allows you to display a message (String of text) in your app. But sometimes you may want to change its color. So in this tutorial, we’ll see how to change text color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

• Steps to change text color in Flutter
• Changing text color globally
• Different ways of adding color

Steps to change text color in Flutter

You can change text color in Flutter, by adding style to the Text widget. Basically, you provide the styling instructions by using the TextStyle class and set its color parameter.

Steps

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

Step 2: Inside the Text widget, add the Style parameter and assign the TextStyle widget.

Step 3: Inside the TextStyle widget, add the color parameter and set the color of your choice. For example, color: Colors.deepPurpleAccent.

Code Example

Text(
  'Hello World',
  style: TextStyle(color: Colors.deepPurpleAccent), <-- SEE HERE
)

Also, see how to add color from hex. By using hex codes, you can easily create colors that match your brand or design vision.

Changing text color globally

In the previous section, we saw how to change the 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 text color at the app level.

You can change the text color globally by defining the textTheme and then adding the TextTheme widget. Inside the TextTheme widget, you can specify which type of text you want to change. for example, headline1, headline2, and so on, and then assign the color.

Steps

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 with appropriate TextStyle such as headline1 and headline2.

Step 4: Specify the color inside the TextStyle widget.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    textTheme:
        TextTheme(headline2: TextStyle(color: Colors.deepPurpleAccent), //<-- SEE HERE
),
  ),
  home: ChangeTextColorDemo(),
);

Output

Different ways of adding color

There are main three ways you can add color to the Text 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

Text(
  'How are you?',
  style: TextStyle(fontSize: 50, color: Colors.deepPurpleAccent),
),
Text(
  'Hello World',
  style: TextStyle(fontSize: 50, color: Color(0xffF02E65)),
),
Text(
  'Hello Flutter',
  style: TextStyle(
      fontSize: 50, color: Color.fromARGB(255, 66, 125, 145)),
),

Output

Conclusion

In this tutorial, we learned how to change 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?