I am trying to change the status bar color to white. I found this pub on flutter. I tried to use the example code on my dart files.
-
On iOS, you can simple wrap the body of your scaffold in a safe area. The colour you set as the scaffold's background colour will become the status bar colour.– dingoMay 31, 2021 at 15:11
36 Answers
Update Flutter 2.0 (Recommended):
On latest Flutter version, you should use:
AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
// Status bar color
statusBarColor: Colors.red,
// Status bar brightness (optional)
statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
statusBarBrightness: Brightness.light, // For iOS (dark icons)
),
)
Only Android (more flexibility):
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
Both iOS and Android:
appBar: AppBar(
backgroundColor: Colors.red, // Status bar color
)
A bit hacky but works on both iOS and Android:
Container(
color: Colors.red, // Status bar color
child: SafeArea(
left: false,
right: false,
bottom: false,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue, // App bar color
),
),
),
)
-
I am newbie in flutter and I want to know What if we put these lines in build method of any widget ? Does it make any difference ?– BhavnikDec 22, 2019 at 7:37
-
It will work and does not make any difference. Just keep in mind, the color will be set with params of the latest caller. Jan 9, 2020 at 3:26
-
How can I change the status bar text color when changing the app theme from light to dark and vice versa? Are there any properties in ThemeData class? Jun 19, 2020 at 12:28
-
5@VinothVino Sorry but you can't give text color of your choice to status bar items, all you can do is change
brightness
, whereBrightness.light
shows black text color andBrightness.dark
shows white. Jun 19, 2020 at 16:55 -
1@JayTillu You can pass
statusBarBrightness
property toSystemUiOverlayStyle
constructor. Aug 5, 2021 at 6:32
Works totally fine in my app
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return MaterialApp(
title: app_title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(title: home_title),
);
}
}
UPD: Recommended solution (Flutter 2.0 and above)
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white
));
-
13Many thanks Andrey; It works ... the only issue is that the background is white but the clock, wireless and other text and icons are also in white .. I am not sure why!! (I am expecting the text and icons to be in black) Sep 25, 2018 at 11:02
-
1I didn't find this too. And I've edited post - there is another and simpler solution for setting status bar color Sep 25, 2018 at 11:30
-
1Excelent. Just a little comment... You have to open the pubspec.yaml file and add the next line under dependencies line: flutter_statusbarcolor: ^0.2.3 (Check the last version here [pub.dev/packages/flutter_statusbarcolor#-installing-tab-]) Mar 3, 2020 at 20:17
-
3it changes the background of the status bar, not the text of the status bar itself. Jun 3, 2020 at 20:58
-
4@AbdulrahmanMasoud the question was about statusbar color, not text Jun 4, 2020 at 8:23
For those who uses AppBar
If you use AppBar
then updating status bar color is as simple as this:
Scaffold(
appBar: AppBar(
// Use [Brightness.light] for black status bar
// or [Brightness.dark] for white status bar
// https://stackoverflow.com/a/58132007/1321917
brightness: Brightness.light
),
body: ...
)
To apply for all app bars:
return MaterialApp(
theme: Theme.of(context).copyWith(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(brightness: Brightness.light),
...
),
For those who don't use AppBar
Wrap your content with AnnotatedRegion
and set value
to SystemUiOverlayStyle.light
or SystemUiOverlayStyle.dark
:
return AnnotatedRegion<SystemUiOverlayStyle>(
// Use [SystemUiOverlayStyle.light] for white status bar
// or [SystemUiOverlayStyle.dark] for black status bar
// https://stackoverflow.com/a/58132007/1321917
value: SystemUiOverlayStyle.light,
child: Scaffold(...),
);
-
3
-
1if you want to get the status bar color according to your theme, you can always use
brightness: Theme.of(context).brightness
May 9, 2020 at 1:03 -
1
-
what if we don't want to change the statusbar color and put as default by the system of the device. what should we do in this case? Apr 28, 2021 at 18:11
-
1
Edit for Flutter 2.0.0
The answer below does not work anymore when you have an AppBar
on the screen. You now need to configure the AppBarTheme.brightness
and AppBarTheme.systemOverlayStyle
correctly in that case.
Answer
Instead of the often suggested SystemChrome.setSystemUIOverlayStyle()
which is a system wide service and does not reset on a different route, you can use an AnnotatedRegion<SystemUiOverlayStyle>
which is a widget and only has effect for the widget that you wrap.
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
-
1This is the best answer, as popping back to the screen after a push will reset the status bar. This was first mentioned by Jordy here stackoverflow.com/a/54593164/4033525– Sameer JJan 12, 2020 at 22:58
-
1I also believe this is the best answer if we need it throughout the app– AbbasJan 18, 2020 at 11:34
-
6I am using it in one screen and it is having effect on all other screens in app. I am using it on my first screen and naturally the other screens are connected so it is having the same status bar color, in this white, on all other screens. How to prevent this behavior? How to make it work on only a particular scaffold?– gegobyteMay 30, 2020 at 17:52
-
@gegobyte i had same issue. what i did was using 1 global color, which is used in most views. But in specific views, where was needed different color, i just reused same widget but with different color– AndrisJul 20, 2020 at 12:30
-
This worked for me:
Import Service
import 'package:flutter/services.dart';
Then add:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return MaterialApp(home: Scaffold(
-
What if dark theme is active on the device? Can we change status bar color dynamically? Nov 1, 2021 at 17:11
-
Change status bar color when you are not using
AppBar
First Import this
import 'package:flutter/services.dart';
Now use below code to change status bar color in your application when you are not using the AppBar
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
);
To change the status bar color in
iOS
when you are usingSafeArea
Scaffold(
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(child: Container(
/* Add your Widget here */
)),
),
);
-
1I got caught out by putting the SafeArea before the scaffold which stopped the background color from the scaffold from extending behind the status bar. Jun 30, 2020 at 4:06
I think this will help you:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.white, // navigation bar color
statusBarColor: Colors.white, // status bar color
statusBarIconBrightness: Brightness.dark, // status bar icons' color
systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
));
I can't comment directly in the thread since I don't have the requisite reputation yet, but the author asked the following:
the only issue is that the background is white but the clock, wireless and other text and icons are also in white .. I am not sure why!!
For anyone else who comes to this thread, here's what worked for me. The text color of the status bar is decided by the Brightness constant in flutter/material.dart
. To change this, adjust the SystemChrome
solution like so to configure the text:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
statusBarBrightness: Brightness.dark,
));
Your possible values for Brightness
are Brightness.dark
and Brightness.light
.
Documentation: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html
This is everything you need to know:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.amber, // navigation bar color
statusBarColor: Colors.white, // status bar color
statusBarIconBrightness: Brightness.dark, // status bar icon color
systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
));
runApp(MyApp());
}
What worked for me (For those who don't use AppBar)
Add AppbBar with preferred color and then set : toolbarHeight: 0
child: Scaffold(
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.blue,
brightness: Brightness.light,
)
It can be achieved in 2 steps:
- Set the status bar color to match to your page background using FlutterStatusbarcolor package
- Set the status bar buttons' (battery, wifi etc.) colors using the
AppBar.brightness
property
If you have an AppBar
:
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
// Other AppBar properties
),
body: Container()
);
}
If you don't want to show the app bar in the page:
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
elevation: 0.0,
toolbarHeight: 0.0, // Hide the AppBar
),
body: Container()
}
on the main.dart file import service like follow
import 'package:flutter/services.dart';
and inside build method just add this line before return
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.orange
));
Like this:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: CustomColors.appbarcolor
));
return MaterialApp(
home: MySplash(),
theme: ThemeData(
brightness: Brightness.light,
primaryColor: CustomColors.appbarcolor,
),
);
}
[Tested in Android] This is how I was able to make status bar transparent and it's text color dark,
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent, // transparent status bar
statusBarIconBrightness: Brightness.dark // dark text for status bar
));
runApp(MyApp());
}
This one will also work
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
This is by far is the best way, it requires no extra plugins.
Widget emptyAppBar(){
return PreferredSize(
preferredSize: Size.fromHeight(0.0),
child: AppBar(
backgroundColor: Color(0xFFf7f7f7),
brightness: Brightness.light,
)
);
}
and call it in your scaffold like this
return Scaffold(
appBar: emptyAppBar(),
.
.
.
Most of the answers are using SystemChrome
which only works for Android. My solution is to combine both AnnotatedRegion
and SafeArea
into new Widget so it also works in iOS. And I can use it with or without AppBar
.
class ColoredStatusBar extends StatelessWidget {
const ColoredStatusBar({
Key key,
this.color,
this.child,
this.brightness = Brightness.dark,
}) : super(key: key);
final Color color;
final Widget child;
final Brightness brightness;
@override
Widget build(BuildContext context) {
final defaultColor = Colors.blue;
final androidIconBrightness =
brightness == Brightness.dark ? Brightness.light : Brightness.dark;
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: color ?? defaultColor,
statusBarIconBrightness: androidIconBrightness,
statusBarBrightness: brightness,
),
child: Container(
color: color ?? defaultColor,
child: SafeArea(
bottom: false,
child: Container(
child: child,
),
),
),
);
}
}
Usage: Place it to top of page's widget.
@override
Widget build(BuildContext context) {
return ColoredStatusBar(
child: /* your child here */,
);
}
-
Thanks Man, This works nicely, just hides part of the debug tag, but that's Ok i guess. Dec 20, 2021 at 2:21
Using AnnotatedRegion is what works best for me, especially if I don't have an AppBar
import 'package:flutter/services.dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
From Flutter 2.5.0
brightness
property is deprecated in AppBar
We need to use, systemOverlayStyle
property
Example,If you are using an AppBar
AppBar(
title: Text("Title"),
systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color
-
Thank you nothing else worked. This is the only thing that works in Flutter 2.5.0 Oct 8, 2021 at 3:20
-
I'm now using Flutter 2.5.2,this is not work. I found that ``` SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); ``` is the correct way to make it work on iOS– CharlesOct 13, 2021 at 7:30
return Scaffold(
backgroundColor: STATUS_BAR_COLOR_HERE,
body: SafeArea(
child: scaffoldBody(),
),
);
Works for both iOS and Android
import 'package:flutter/services.dart';
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return Scaffold();
}
You can do as follows,
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.grey.withOpacity(0.5),
statusBarIconBrightness: Brightness.dark,
statusBarBrightness:
Platform.isAndroid ? Brightness.dark : Brightness.light,
systemNavigationBarColor: Colors.white,
systemNavigationBarDividerColor: Colors.grey,
systemNavigationBarIconBrightness: Brightness.dark,
),
);
Add this code to your main.dart build method,
to Make it Like your App Bar Color
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
));
}
None of the existing solutions helped me, because I don't use AppBar
and I don't want to make statements whenever the user switches the app theme. I needed a reactive way to switch between the light and dark modes and found that AppBar
uses a widget called Semantics
for setting the status bar color.
Basically, this is how I do it:
return Semantics(
container: false, // don't make it a new node in the hierarchy
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light, // or .dark
child: MyApp(), // your widget goes here
),
);
Semantics
is imported frompackage:flutter/material.dart
.SystemUiOverlayStyle
is imported frompackage:flutter/services.dart
.
-
facing Same issue as mentioned above but solution won't work in Andorid 10– AditiNov 9, 2020 at 12:43
Use this way to make your status bar completely white with the dark status bar icons, I use it personally! tested on android worked fine!
import 'package:FileSharing/bodypage.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
appBarTheme: AppBarTheme(
color: Colors.white,
elevation: 0,
brightness: Brightness.light,
centerTitle: true,
iconTheme: IconThemeData(
color: Colors.black,
),
textTheme: TextTheme(),
)
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
));
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
actions: [
Container(
width: 63,
padding: EdgeInsets.only(right: 30),
child: FloatingActionButton(
onPressed: null,
backgroundColor: Colors.pink,
elevation: 8,
child: Icon(Icons.person_pin),
),
)
],
),
);
}
}
this (inside the scaffold) creates a black statusbar with light content. (no Appbar)
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.black,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
you can use for Android:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
-
This work inside widgets, just put the widget above build method. Jun 12, 2021 at 20:44
you can also use this in SliverAppBar, don't forget to use backwardsCompatibility: false
it would not work if you skip this property. also see doc
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: null,
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark),
backwardsCompatibility: false,
//... remaining code and close braces..
Full example
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
systemNavigationBarColor: Colors.red, // navigation bar color
systemNavigationBarIconBrightness: Brightness.light, //navigation bar icons' color
),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('data'),
systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.red,
statusBarIconBrightness: Brightness.light,
),
),
),
);
}
}
None of the answers seem to mention that you can do it with your ThemeData
function in your main MaterialApp
widget.
return MaterialApp(
theme: ThemeData(
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
),
),
),
This can also be done in the darkTheme
ThemeData.
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(brightness: Brightness.dark),
child: Scaffold()
....
)
}
-
3Please don't post only code as an answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually of higher quality, and are more likely to attract upvotes. Mar 28, 2020 at 8:23