Change AppBar Text Color in Flutter  –  EASIEST Way [2023]

The AppBar widget in Flutter is one of the most used widgets. It allows you to display a page title with a leading icon and some important actions that you can handle on a page such as a filter, logout page, etc. But after adding AppBar, you may want to change its text color. So in this tutorial, we’ll see how to change appbar text color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

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

Steps to change appbar text color in Flutter

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

Here’s how you do it:

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

Step 2: Inside the AppBar widget, find the Text widget inside the title parameter.

Step 3: Inside the Text widget, add the style parameter and add the TextStyle widget.

Step 4: Inside the TextStyle widget, add the color parameter and assign the appropriate color.

Step 5: Run the app.

Code Example

AppBar(
  centerTitle: true,
  title: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'assets/images/logo.png',
        scale: 12,
      ),
      const SizedBox(
        width: 10,
      ),
      const Text(
        'FlutterBeads',
        style: TextStyle(color: Colors.black), //<-- SEE HERE
      ),
    ],
  ),
)

Changing appbar text color globally

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

You can change the appbar color globally by defining the appBarTheme and then adding the AppBarTheme widget. Inside the AppBarTheme widget, you can specify the foregroundColor parameter and then assign the actual 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 appBarTheme parameter and then assign the AppBarTheme class.

Step 4: Inside the AppBarTheme, specify the foregroundColor parameter and set the color.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Colors.black),
        foregroundColor: Colors.black, //<-- SEE HERE
),
),
  home: ChangeAppBarColorDemo(),
);

Different ways of adding color

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

AppBar(
  centerTitle: true,
  title: Text(
  'FlutterBeads',
  style: TextStyle(color: Colors.black), //<-- SEE HERE
  ),
),
AppBar(
  centerTitle: true,
  title: Text(
  'FlutterBeads',
  style: TextStyle(color: Color(0xffF02E65)), //<-- SEE HERE
  ),
),
AppBar(
  centerTitle: true,
  title: Text(
  'FlutterBeads',
  style: TextStyle(color: Color.fromARGB(255, 66, 125, 145)), //<-- SEE HERE
  ),
),

Conclusion

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