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.

Answer 1

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

Answer 2

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

Note: This package is not compatible with Flutter 3.0 or above [1]: https://pub.dev/packages/flutter_statusbarcolor

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

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

Answer 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(

Answer 6

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 using SafeArea

Scaffold(
  body: Container(
    color: Colors.red, // Set your status bar color here
    child: SafeArea(child: Container(
      // Add your Widget here
    )),
  ),
); 

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

It can be achieved in 2 steps:

1. Set the status bar color to match to your page background using FlutterStatusbarcolor package
2. 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()
  }

Answer 12

[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());
}

Answer 13

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

Answer 14

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

Answer 15

This one will also work

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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.

Answer 20

Latest solution. Flutter 2.0 and above

For those who use AppBar:

/// WORKS on the screen where appBar is used
Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          // statusBarColor: Colors.red, // You can use this as well
          statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
          statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
        ),
      ),
     ), 

For those who DON'T use AppBar:

1. Put the code below on the root screen's build function to AFFECT all the screens below:

void main() {
  runApp(MyApp());
}

// This widget is the root of your application.
class MyApp extends StatelessWidget {

  /// WORKS on every screen EXCEPT the screen in which appBar is used
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      // statusBarColor: Colors.red, // You can use this as well
      statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
      statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
    ),
  );
  @override
  Widget build(BuildContext context) {}
}

2. Put the code below on the single screen's build function to AFFECT this screen only:

class SingleScreen extends StatelessWidget {

  /// WORKS on a single screen where appBar is NOT used
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      // statusBarColor: Colors.red, // You can use this as well
      statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
      statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
    ),
  );
  @override
  Widget build(BuildContext context) {}
}

Answer 21

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

Answer 22

Works for both iOS and Android

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}
    

Answer 23

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,

Answer 24

this (inside the scaffold) creates a black statusbar with light content. (no Appbar)

appBar: AppBar(
      toolbarHeight: 0,
      backgroundColor: Colors.black,
      systemOverlayStyle: SystemUiOverlayStyle.light,
    ),

Answer 25

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

Answer 26

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 from package:flutter/material.dart.
• SystemUiOverlayStyle is imported from package:flutter/services.dart.

Answer 27

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

Answer 28

The best way with out any packages

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        toolbarHeight: 0,
        backgroundColor: Colors.transparent,
        elevation: 0,
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // <-- SEE HERE
          statusBarIconBrightness:
              Brightness.dark, //<-- For Android SEE HERE (dark icons)
          statusBarBrightness: Brightness.light,
        ),
      ),.......

Answer 29

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

Answer 30

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

Answer 31

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

Answer 32

For those of you who are having problems with inconsistencies between iOS and Android color, this worked for me:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

return AppBar(
      systemOverlayStyle: (Platform.isIOS)
          ? SystemUiOverlayStyle.light
          : const SystemUiOverlayStyle(
            statusBarColor: pbsBlue,
            statusBarIconBrightness: Brightness.light,
            statusBarBrightness: Brightness.light,
          ),
      backgroundColor: Colors.blue,
      title: Text('Home'),
    );

Note that this is an extract of a reusable widget for AppBar.

Answer 33

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

Answer 34

I had issues with all mentioned answers, except with solution i did myself: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) For views, where is no appBar added i just use container with background which exact height matches status bar height. In this scenario each view can have different status color and i don't need to worry and think about some logic, that somehow wrong views has somehow wrong colors.

Answer 35

First of all you are import this line:

import 'package:flutter/services.dart';

Then You can use bellow this some line of code in main.dart file

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

Note: If you follow above this steep. as a result you control all of screen. But if you control individual screen status bar color then you can try this ...

import 'package:flutter/services.dart';

Widget build(BuildContext context) {
 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: Colors.transparent,
));
}

Answer 36

You can change it without appbar with giving scaffold(backgroundColor: color); and if you wrap your body with safearea, problem probably solved. I mean this solution is not practice but if you are not using appbar, you can achive with this way.

Answer 37

At Flutter 2.8:

AppBar(
    backgroundColor: YOUR_COLOR_HERE,
    toolbarHeight: 0,
);

Answer 38

In Your App Bar Widget please add this

      systemOverlayStyle: SystemUiOverlayStyle(
        systemNavigationBarColor:
            const Color(0xfffffbff),
      ),

Answer 39

If you want to change the status color for the whole app, you can use the primaryColorDark property like this:

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
      theme: ThemeData(
        primaryColorDark: Colors.white,
      ),
    ),
  );
}

Answer 40

I solved it by change the whole background color like following:

In the main screen:

return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
     ),
);