How can we change appbar background color in flutter
If you don't want to change the whole PrimaryColor
you can also define AppBarTheme
in your ThemeData
:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
appBarTheme: AppBarTheme(
color: const Color(0xFF151026),
)),
home: myApp(),
)
Declare your Color:
const primaryColor = Color(0xFF151026);
In the MaterialApp
level (will change the AppBar Color in the whole app ) change primaryColor
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: primaryColor,
),
home: MyApp(),
);
and if you want to change it on the Widget level modify the backgroundColor
appBar: AppBar(
backgroundColor: primaryColor,
),
As of Flutter 2.5.0, to comply with "Material You", we should try to use ColorScheme
whenever possible. The app bar color is controlled by:
If theme
brightness
islight
, useprimary
color.If theme
brightness
isdark
, usesurface
color.
For examples:
Light Mode
Set brightness
to light
, then set primary
and onPrimary
to yellow and black, and set all other colors to grey to showcase that they are not relevant to AppBar:
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme(
brightness: Brightness.light,
primary: Colors.yellow,
onPrimary: Colors.black,
// Colors that are not relevant to AppBar in LIGHT mode:
primaryVariant: Colors.grey,
secondary: Colors.grey,
secondaryVariant: Colors.grey,
onSecondary: Colors.grey,
background: Colors.grey,
onBackground: Colors.grey,
surface: Colors.grey,
onSurface: Colors.grey,
error: Colors.grey,
onError: Colors.grey,
),
),
home: Scaffold(
appBar: AppBar(title: Text("Light Mode Demo")),
),
)
Dark Mode
Set brightness
to dark
, then set surface
and onSurface
to yellow and black, all others to grey to showcase that they are not relevant to AppBar.
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme(
brightness: Brightness.dark,
surface: Colors.yellow,
onSurface: Colors.black,
// Colors that are not relevant to AppBar in DARK mode:
primary: Colors.grey,
onPrimary: Colors.grey,
primaryVariant: Colors.grey,
secondary: Colors.grey,
secondaryVariant: Colors.grey,
onSecondary: Colors.grey,
background: Colors.grey,
onBackground: Colors.grey,
error: Colors.grey,
onError: Colors.grey,
),
),
home: Scaffold(
appBar: AppBar(title: Text("Dark Mode Demo")),
),
)