How to change Flutter App Bar Background Color?

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.