Flutter App Bar Background Color
In this tutorial, we shall learn how to change the background color of Application Bar in your Flutter Application.
To change color of Application Bar in MaterialApp class, you can set the primarySwatch
in theme. A quick code snippet to change the app bar color is given below.
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: MyApp(),
)
primarySwatch: Colors.amber
sets the color of application bar to amber. You may set the color that suits your Application look and feel.
You can also change color of Application Bar using Scaffold. Set the backgroundColor
in appBar
of your Scaffold. A quick code snippet to change the app bar color is given below.
Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff885566),
title: Text(
'Flutter Tutorial - googleflutter.com',
),
),
body: Container(),
);
backgroundColor: Color(0xff885566)
sets the color of application bar to Color(0xff885566)
. You may change the hex value to get the required color that suits your application.
Example 1: Change Color of App Bar in MaterialApp
Create a basic Flutter application, and copy the code of following main.dart into your application’s main.dart. In this example, we are setting the background color of app bar using MaterialApp.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Flutter Tutorial',
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: MyApp(),
debugShowCheckedModeBanner: false,
));
}
class MyApp extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tutorial - googleflutter.com'),
),
body: Container(
),
);
}
}
Run this example Flutter Application in your Android or Apple device. You should get an amber colored Application Bar.
Screenshot
Example 2: Change Color of App Bar in Scaffold
Create a basic Flutter application, and copy the code of following main.dart into your application’s main.dart. In this application, we are setting the app bar color in Scaffold.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Flutter Tutorial',
home: MyApp(),
debugShowCheckedModeBanner: false,
));
}
class MyApp extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff885566),
title: Text(
'Flutter Tutorial - googleflutter.com',
),
),
body: Container(),
);
}
}
Run this example Flutter Application in your Android or Apple device. You should get Application Bar with color set to Color(0xff885566)
.
Screenshot
Summary
In this Flutter Tutorial, we learned how to change the background color of Application Bar.