Table of Contents
Many times when working on a Flutter app design you need to change the appbar widget color. The appbar widget is one of the most used Flutter widgets, It allows you to identify the page’s titles, and it contains the toolbar and buttons such as the leading button and action button. In this tutorial, we will learn how to change appbar color in Flutter in two ways. so without further ado let’s get right into it.
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
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.
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.
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(), );
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.