How To Change Flutter Appbar Color In Flutter App-2022 Guide

flutter appbar color

In this tutorial, we will be implementing custom Flutter appbar color, understanding how to change the flutter appbar color, what is the default flutter appbar color and how to change it with our desired Flutter appbar color.

After reading this article, you’ll have a detailed knowledge of how to properly change background color of Flutter appbar widget.

Default Flutter Appbar Color

Scaffold(
      appBar: AppBar()
    )
flutter appbar default color
We have passed the flutter appbar class to the appbar constructor of the flutter scaffold class. We haven’t specified any flutter appbar color, let’s see what color do we get by default. We can see in the above image that the default flutter appbar color is blue.

Change Flutter Appbar Color

AppBar(

        backgroundColor: Colors.pink

      )
flutter appbar color change
To change the flutter appbar color, we have to use the background color constructor of the flutter appbar. Using that constructor, we can give our flutter appbar any color we want. In the above code, we have give our flutter appbar a pink color using the background color constructor of the flutter appbar. We can see in the image above our pink flutter appbar.

Transparent Flutter Appbar

AppBar(

  backgroundColor: Colors.transparent

)
flutter appbar color transparent
If we want to make our flutter appbar to be transparent, means with no color then we can pass transparent color property to the flutter appbar background color constructor. In the code above, we have passed the transparent property to flutter appbar background color. Let’s see how it looks, we can see a grey color of the appbar, it is actually the shadow elevation color. If you want it to disappear then you have to make the elevation constructor of the flutter appbar to 0. See the code below for that.
AppBar(
  elevation:0
  backgroundColor: Colors.transparent
)
Using this, we will see no flutter appbar but the flutter appbar will still be there, in order to prove it, we have used a flutter appbar title using the code below:
AppBar(

        backgroundColor: Colors.transparent,

        elevation: 0,

        centerTitle: true,

        title: Text(

          'Appbar',

          style: TextStyle(color: Colors.blue),

        ),

      )
flutter appbar color transparent
We can see the we have a transparent flutter appbar. Congrats for making it that far, now you have a detailed knowledge of how to customize the color of flutter appbar. We have implemented a beautiful flutter appbar as a treat for you. You can implement it in your code for free. Hope you will like it. The source code is given below.

Source Code

flutter appbar

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        debugShowCheckedModeBanner: false,

        title: 'Flutter Appbar Color',

        home: flutterAppbarColor());

  }

}

class flutterAppbarColor extends StatefulWidget {

  @override

  State<flutterAppbarColor> createState() => _flutterAppbarColorState();

}

class _flutterAppbarColorState extends State<flutterAppbarColor> {

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

        appBar: AppBar(

            backgroundColor: Colors.transparent,

            leading: Container(

                margin: const EdgeInsets.all(8.0),

                padding: const EdgeInsets.all(9.0),

                alignment: Alignment.center,

                decoration: BoxDecoration(

                    shape: BoxShape.circle,

                    color: Colors.pink,

                    boxShadow: [

                      BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                    ]),

                child: Icon(Icons.arrow_back_ios)),

            elevation: 0,

            title: Text(

              'Appbar',

              style: TextStyle(color: Colors.pink, fontWeight: FontWeight.w900),

            ),

            actions: [

              Container(

                  margin: const EdgeInsets.all(8.0),

                  padding: const EdgeInsets.all(8.0),

                  decoration: BoxDecoration(

                      shape: BoxShape.circle,

                      color: Colors.pink,

                      boxShadow: [

                        BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                      ]),

                  child: Icon(Icons.chat)),

              Container(

                  margin: const EdgeInsets.all(8.0),

                  padding: const EdgeInsets.all(8.0),

                  decoration: BoxDecoration(

                      shape: BoxShape.circle,

                      color: Colors.pink,

                      boxShadow: [

                        BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                      ]),

                  child: Icon(Icons.email)),

              Container(

                  margin: const EdgeInsets.all(8.0),

                  padding: const EdgeInsets.all(8.0),

                  decoration: BoxDecoration(

                      shape: BoxShape.circle,

                      color: Colors.pink,

                      boxShadow: [

                        BoxShadow(blurRadius: 5, color: Colors.grey.shade800)

                      ]),

                  child: Icon(Icons.logout)),

            ]),

      ),

    );

  }

}

Conclusion

That’s it for this article in which we have understood Flutter appbar color customization with proper implementation. We would love to see you implement the mentioned beautiful Flutter appbar design in your code and share your experience with us using the comment section.

We’d be very glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.

Leave a Comment

Your email address will not be published. Required fields are marked *