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() )
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 )
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 )
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), ), )
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
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.
