Changing AppBar Background Color in Flutter

In this tutorial, you will learn how to use change the background color of the top App Bar in Flutter.

To change the background color of the AppBar widget in Flutter, we use its backgroundColor property.

AppBar( 
    backgroundColor: Colors.red
), // AppBar

Below is a very simple Flutter app example, that uses the above code snippet to set the background color of the top AppBar.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Center(child: Text('My first app')),
      ),
      body: Text('Hello World'),
      )
    ),
  );
}

I hope this very short Flutter tutorial was helpful to you. To learn more about Flutter and how to build cross-platform mobile apps with Flutter, please check the Flutter tutorials section on this website.

Video Tutorial

If you prefer learning by watching video tutorials, then below is a video tutorial that demonstrates how to use the Colors class in Flutter and how to use it to change the background color of the app bar, Text widget, and also the app background color.

Happy learning!