Change Appbar Back Button Color in Flutter  –  The Right Way [2023]

Any mobile app is incomplete without having the AppBar. The AppBar is used to display the current page title as well as some buttons to go back or take some action on that page. If you just created the new project and haven’t configured the theme colors of your app yet, when you navigate to the new page, you may find that the color of the default back button is different. So in this tutorial, we’ll see the right way to change appbar back button color in Flutter.

Here’s how it looks:

Here’s what we’ll cover:

• The Simplest Way to Change Default Back Button Color
• The Problem of Using BackButton
• The Right Way to Change Appbar Back Button Color in Flutter
• Changing Appbar Back Button Color Globally

The Simplest Way to Change Default Back Button Color

The simplest way of changing the default back button color is by overriding the existing back button with the dedicated BackButton widget and changing its color. When you click on the BackButton widget, it automatically opens the previous page.

Steps

Step 1: Inside the AppBar, add the leading parameter and assign the BackButton widget.

Step 2: Inside the BackButton, add the color parameter and assign the color of your choice.

Step 3: Run your app.

Code Example

AppBar(
  leading: const BackButton(
    color: Colors.black, // <-- SEE HERE
  ),
  centerTitle: true,
)

Output

The Problem of Using BackButton

While you may prefer to use the BackButton to change the AppBar back button color, one problem associated with this approach is that it doesn’t change the color of the icons that are added to the actions parameter. Keeping different colors for the back button and action items is not advisable from the user experience perspective.

Here’s how it looks:

The Right Way to Change Appbar Back Button Color in Flutter

So the right way to change appbar back button color in Flutter is to use iconTheme to change the colors of all the icons present in the appbar.

Steps

Step 1: Inside the AppBar, add the iconTheme parameter and assign the IconThemeData widget.

Step 2: Inside the IconThemeData, add the color parameter and assign the color of your choice.

Step 3: Run your app.

Code Example

AppBar(
  iconTheme: IconThemeData(
    color: Colors.black, // <-- SEE HERE
  ),
  centerTitle: true,
  actions: [IconButton(onPressed: () {}, icon:  Icon(Icons.settings))],
)

Output

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 Appbar Back Button Color Globally

If you need to change the back button color, it is very obvious that you would want to change the color of a back button inside all pages of your app. 

Steps

Step 1: Open the main.dart and locate the MaterialApp -> ThemeData widget.

Step 2: Inside the ThemeData, add the appBarTheme parameter and assign the AppBarTheme widget.

Step 3: Inside the AppBarTheme, add the iconTheme parameter and assign the IconThemeData widget.

Step 4: Inside the IconThemeData, add the color parameter and assign the color of your choice.

Step 5: Run your app.

Code Example

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

Conclusion

In this tutorial, we learn how to change appbar back button color in Flutter with practical examples. We first saw the simplest approach of using the BackButton and then explore the right way to change the default back button icon color using the iconTheme property. Finally, we also saw how to change color globally.

Would you like to check other interesting Flutter tutorials?