How To Easily Change Flutter Appbar Background Color

In this Flutter post, we will be changing Flutter appbar background color with step by step explanation. We will be using a proper Flutter example for practical demonstration. I am sure that after reading this post, you will easily customize the background color of Flutter appbar in your Flutter apps.

So let’s get right into customizing Flutter appbar background color.

What is Flutter Appbar Background Color?

As the name suggests, Flutter appbar background color is the color of the Flutter appbar widget. We will first see what the default background color of Flutter appbar is. After that, we will give a color of our own choice to the background of Flutter appbar widget.

Default Flutter Appbar Background Color

For that, we have to implement a simple Flutter appbar widget. For doing so, we have to use the appbar constructor of the Flutter scaffold widget and pass appbar widget to that constructor. See the below code:

Scaffold(
      appBar: AppBar()
    )

So this is the default Flutter appbar background color. Let’s now see how to change it.

Change Flutter Appbar background Color

In order to easily change the background color of Flutter appbar widget, we have to use the background color constructor of the Flutter appbar widget. This constructor takes a color so for demonstration, we will pass a green color to it. See below code:

AppBar(
        backgroundColor: Colors.green
      )

You can see that the Flutter appbar background color is successfully changed.

So by following this guide, you can easily change the background color of Flutter appbar widget. You can give it any color you want. Don’t hold back your questions related to the customization of background color of Flutter appbar widget, if you have any. I would really be happy to answer all.

The customized Flutter appbar widget source code is given in the next section in which the custom Flutter appbar background color is also implemented.

Custom Flutter Appbar Background Color Source Code

 

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        centerTitle: true,
        title: Text(
          'Custom Flutter Appbar Background Color',
          style: TextStyle(fontSize: 17),
        ),
      ),
    ));
  }
}

Conclusion

To conclude, I am sure this post will guide you in customizing Flutter appbar background color in your own Flutter apps with ease. I would be very happy to have your feedback on this post. Thanks for reading this post.