Change Theme Text Color in Flutter  –  The RIGHT Way

The Theme widget is a very important widget in Flutter. It allows you to define the visual aesthetic of your app. You can control the look and feel of your app from this Theme widget. You are here because you may want to change the text color of the Theme that will change the color of all the Text widgets in your app. So in this tutorial, we’ll see how to change theme text color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

• Steps to change theme text color in Flutter
• Changing theme text color for all TextStyle
• Different ways of adding color

Steps to change theme text color in Flutter

You can change theme text color in Flutter, by defining the TextTheme (inside MaterialApp) and then adding headings type. For example, headline1, headline2, BodyText1, and so on. After that, you can assign the TextStyle widget 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 heading parameter such as headline1, subtitle1 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,
    textTheme:
        TextTheme(
      headline1: TextStyle(color: Colors.deepPurpleAccent),
      headline2: TextStyle(color: Colors.deepPurpleAccent),
      bodyText2: TextStyle(color: Colors.deepPurpleAccent),
      subtitle1: TextStyle(color: Colors.pinkAccent),
    ),
  ),
  home: ChangeTextColorDemo(),
);

Changing theme text color for all TextStyle

In the previous section, we saw how to change the theme text color by adding the color property to TextStyle such as headline1, headline2, BodyText1individually. Now in order to change the color of all TextStyle in go, textTheme.apply. Inside textTheme.apply you can use a couple of color parameters to set the color.

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 Theme.of(context).textTheme.apply.

Step 4: Inside the Theme.of(context).textTheme.apply add the bodyColor and displayColor property and set the color.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme:
        Theme.of(context).textTheme.apply(
      bodyColor: Colors.pinkAccent, //<-- SEE HERE
      displayColor: Colors.pinkAccent, //<-- SEE HERE
    ),
  ),
  home: ChangeTextColorDemo(),
);

Different ways of adding color

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

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme:
        TextTheme(
      headline1: TextStyle(color: Colors.deepPurpleAccent),
      headline2: TextStyle(color: Color(0xffF02E65)),
      bodyText2: TextStyle(color: Color.fromARGB(255, 66, 125, 145)),
    ),
  ),
  home: ChangeTextColorDemo(),
);

Conclusion

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