In this tutorial, you will learn how to use change the background color of the top App Bar in Flutter.
If you are interested in Flutter video tutorials, check this playlist: Flutter Video Tutorials. Also, there is a large collection of code examples if you check Flutter tutorials page.
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!
