How to Change AppBar Background Color in Flutter

In this example, we are going to show you how to set AppBar color in Flutter. You will learn different ways to set AppBar color such as by changing the default color of the App, directly changing the AppBar color. You will also learn to make it transparent.

How to Change AppBar Background Color:

AppBar( 
    title: Text("Flutter AppBar Color"),
    backgroundColor: Colors.redAccent,
)

You can change the background color of AppBar with backgroundColor attribute. The output of the above code will look like below:

You can also make your app bar Transparent like below.

How yo Make AppBar Background Color Transparent:

AppBar( 
    title: Text("Flutter AppBar Color"),
    backgroundColor: Colors.redAccent.withOpacity(0.5), 
)

Apply the opacity on the background color to make your AppBar transparent. See this article for more info: How to set Transparent Background Color in Flutter for more details on transparent colors.

You can also set the default primary color of your Flutter app so that AppBar will adapt the default color of your app. Set your app default color like below:

How to Set Default Primary Color of Flutter App:

MaterialApp(
  theme:ThemeData(
        primarySwatch: Colors.purple,
  )
)

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme:ThemeData(
           primarySwatch: Colors.purple,
      ),
      home: Home(),
    );
  }
}


class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Flutter AppBar Color"),
          ),
          body: Container(
          )
       );
  }
}

The output of the above code will look like below:

In this way, you can set the AppBar color in your Flutter App.