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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create a class named as MyApp extends with State less widget. This is our main widget view class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget in Widget build area in MyApp class.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( )); }} |
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)
|
1 2 3 4 |
appBar: AppBar( title: Text('Set App Bar Background Color'), backgroundColor: Color(0xFFFF1744), ), |
6. Creating Center widget -> Column widget -> Text widget in body area.
|
1 2 3 4 5 6 7 8 9 10 |
Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Set App Bar Background Color', style: TextStyle(fontSize: 24),) ], ) ) |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set App Bar Background Color'), backgroundColor: Color(0xFFFF1744), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Set App Bar Background Color', style: TextStyle(fontSize: 24),) ], ) ) ) ); } } |
Screenshot:
