How To Change AppBar Color In Flutter(2 Ways)

01

of 04

The first way to change appbar color

For a small application like this Flutter app UI design, you can change the appbar color by locating the file where you have the appbar widget and then setting the backgroundColor property to a desired color such as Colors.green like so:

AppBar(
          title: Text('Home'),
          backgroundColor: Colors.green, //<---Set the desired color here like my branding color #000132
        ),

If you have a specific color pallet and you want to use hex color codes then set the backgroundColor with Color(0xff000132). We always add the 0xff then our hex code of the color.

using this approach will make you set up the appbar color for each screen you add, to not repeat yourself there is a better way which is to change the appbar color globally at the app level, this way you change the appbar color in one place and it gets changed in the whole application no matter how many screens you have.

02

of 04

Change appbar color globally: Second Way

to change the appbar color globally you first locate the MaterialAppwidget, add the theme property, and assign the ThemeData class to it.

inside the themeData add the appBarTheme property and assign the AppBarTheme class to it, which will have the color property as follows:

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    appBarTheme: AppBarTheme(
        color: Colors.green, //<---Set the desired color here like my branding color #000132
),
  ),
  home: YassineBenkhayChangeAppBarColorTutorial(),
);

03

of 04

The result

04

of 04

Conclusion

In this tutorial, we learned how to change the appbar color on both the page and app levels with practical examples. you can check the custom appbar tutorial to learn how to create a custom appbar in Flutter.