Change AppBar Background Color in Flutter Android iOS Example

AppBar has light blue color in default which is our main theme color. But sometimes app developer wants to change the AppBar color according to his requirement. AppBar can be known as many different names like Action title bar, Toolbar etc. AppBar itself gives us a property backgroundColor. If user did not specify background color or its null then the system useges ThemeData.appBarTheme.color. If ThemeData.appBarTheme.color is also null then it will use ThemeData.primaryColor as by default background color of Appbar. We could use backgroundColor property to Change AppBar Background Color in Flutter Android iOS App Example.

Contents in this project Change AppBar Background Color in Flutter Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

2. Call our main class using void main runApp() method.

3. Create a class named as MyApp extends with State less widget. This is our main widget view class.

4. Create Scaffold widget in Widget build area in MyApp class.

5. Create AppBar widget in Scaffold widget with backgroundColor property. You could also use Color in Hex Code, RGB colde, Color constants and ARGB color code format. Read my this tutorial to understand color formats in flutter. We are using Hex color code here.

Color (0xff + Hex color code)

6. Creating Center widget -> Column widget -> Text widget in body area.

7. Complete source code for main.dart file:

Screenshot:

Change AppBar Background Color in Flutter Android iOS Example

Leave a Reply

Your email address will not be published. Required fields are marked *