How to change status bar color in Flutter?

Question

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.

Solution 1

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),
    );
  }
}

(this package)

UPD: Recommended solution (Flutter 2.0 and above)

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

Solution 2

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

Solution 3

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

Solution 4

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

Solution 5

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(

View more solutions

Comments

[Mohamed Hassan]

Many 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)

[Andrey Turkovsky]

I didn't find this too. And I've edited post - there is another and simpler solution for setting status bar color

[Mohamed Hassan]

Where do I put this other solution code? in my main.dart?

[Sameer J]

This 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

[Abbas]

I also believe this is the best answer if we need it throughout the app

[hfunes.com]

Excelent. 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-])

[Mark Rotteveel]

Please 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.

[kashlo]

This method doesn't allow to set the exact color

[Roman Panaget]

if you want to get the status bar color according to your theme, you can always use brightness: Theme.of(context).brightness

[Andrey Turkovsky]

@JayTillu no. For iOS you have to use flutter_statusbarcolor or set color for each AppBar manually

[gegobyte]

I 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?

[Abdulrahman Masoud]

it changes the background of the status bar, not the text of the status bar itself.

[Andrey Turkovsky]

@AbdulrahmanMasoud the question was about statusbar color, not text

[Vinoth Vino]

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?

[CopsOnRoad]

@VinothVino Sorry but you can't give text color of your choice to status bar items, all you can do is change brightness, where Brightness.light shows black text color and Brightness.dark shows white.

[Bulwinkel]

I got caught out by putting the SafeArea before the scaffold which stopped the background color from the scaffold from extending behind the status bar.

[Andris]

@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

[damd]

value: SystemUiOverlayStyle.light (or .dark) does the same thing

[LOG_TAG]

this is tested for SafeArea in ios also?

[Aditi]

facing Same issue as mentioned above but solution won't work in Andorid 10

[Dhananjay Gavali]

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?

[Andrey Gordeev]

Just don't do anything then

[Jonatas Eduardo]

This work inside widgets, just put the widget above build method.

[CopsOnRoad]

@JayTillu You can pass statusBarBrightness property to SystemUiOverlayStyle constructor.

[Jay Tillu]

@CopsOnRoad will it work on both Android and iOS ??

[CopsOnRoad]

@JayTillu It should, however, I didn't test it on any of the platform.

[Aziz]

Add attribute: statusBarIconBrightness: Brightness.dark in order to avoid status bar icon's color to be changed to white also.

[Jay Tillu]

@AndreyTurkovsky FlutterStatusbarcolor.setStatusBarColor(Colors.white); returns Future. So I have to call the build method after some delay to see the status bar color and text color. I want statusbar color black and text white.

[Andrey Turkovsky]

@JayTillu there is very short delay, in my experience it was unnoticed by user

[Hassan Hammad]

I am on Flutter 2.0 and tried your first recommended solution, but it doesn't work. Any help plz?

[CopsOnRoad]

@HassanHammad Please share your code (in a separate question).

[user3193413]

Thanks it works great!

[Zach Gonzalez]

Thank you nothing else worked. This is the only thing that works in Flutter 2.5.0

[Charles]

I'm now using Flutter 2.5.2，this is not work. I found that ``` SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.li‌​ght); ``` is the correct way to make it work on iOS

[Bhupendra Pandey]

What if dark theme is active on the device? Can we change status bar color dynamically?

[Sharif Rafid Ur Rahman]

Thanks Man, This works nicely, just hides part of the debug tag, but that's Ok i guess.

[zhancheng]

the best answer should be insteaded

[Cyber]

This is outdated by now