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.

Hexagram

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

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

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

Organizer

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) – Hexagram

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

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

You can put in inside build method – Organizer

I get "Target URI doesn't exist" for import package:flutter_statusbarcolor/flutter_statusbarcolor.dart'; – Hay

The question was about this package - pub.dev/packages/flutter_statusbarcolor You have to add dependency to pubspec – Organizer

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-]) – Lorenz

is SystemChrome solution works on both Android and iOS ?? – Turoff

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

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

@AbdulrahmanMasoud the question was about statusbar color, not text – Organizer

flutter_statusbarcolor is broken on iOS with landscape orientation (at least on iPad) – Butanol

How to change text color of status bar? Any suggestion? – Behoof

@TryHarder not found exact solution, I need, want to change Status bar background color green with white text in light theme and black background color with white text in dark theme, still searching perfect solution. Kindly share, whenever you find it, I will do the same with you. Thanks. – Behoof

@Behoof seems like you can only change the text or icon to black or white color ( IOS and Android) and the status bar color can be any ( blue, red, .... etc). I use SystemChrome.setSystemUIOverlayStyle for Android and FlutterStatusbarcolor package for IOS. I not sure why but it seems like SystemChrome.setSystemUIOverlayStyle doesn't work when i test on IOS. Hope this helps you, good luck mate :D – Clichy

@TryHarder I have already added your suggested code with many variants, but still did not get any success. Thanks again. – Behoof

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

@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. – Turoff

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

Not suitable answer, this is common functionality so don't need to use third-party plugin for this, and this plugin has been discontinue now, so avoid unnecessary plugin to do common things ! – Traipse

better to use pub.dev/packages/flutter_statusbarcolor_ns – Chaucerian

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

Indreetloire

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 ? – Specialty

It will work and does not make any difference. Just keep in mind, the color will be set with params of the latest caller. – Pippa

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? – Contemptuous

@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. – Indreetloire

Thanks for the reply bro. How can I change brightness dynamically? I'm changing dark mode, it's not updating properly. If I hot restart the app then it works. – Contemptuous

@VinothVino I'm talking about AppBar's brightness property, you can change that dynamically using setState right? – Indreetloire

It's working now. Thanks for the help man! @Indreetloire – Contemptuous

This changes the status bar and the app bar :/ – Dimer

How can I change the brightness Statusbar if I don't have AppBar? – Turoff

@JayTillu You can pass statusBarBrightness property to SystemUiOverlayStyle constructor. – Indreetloire

@Indreetloire will it work on both Android and iOS ?? – Turoff

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

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

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

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

@Indreetloire In the last option (which is a good hack) how will I be able to change the status bar icon's color? – Turoff

@JayTillu You can't change icon's color with that hack. Use other solutions. – Indreetloire

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://mcmap.net/q/117117/-how-to-change-status-bar-color-in-flutter
    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://mcmap.net/q/117117/-how-to-change-status-bar-color-in-flutter
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);

Toxemia

This method doesn't allow to set the exact color – Terrify

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

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

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? – Inoffensive

Just don't do anything then – Toxemia

thanks!, using AnnotatedRegion is working. – Farina

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

Calendar

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 https://mcmap.net/q/119652/-flutter-how-to-set-status-bar-color-when-appbar-not-present – Kneecap

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

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? – Encase

@Encase 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 – Andalusite

the best answer should be insteaded – Hatchery

This doesn't work on iOS – Alodium

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(

Cordwood

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

This is outdated by now – Footboard

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

Walling

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

I used SafeArea and your solution saved me time. Thank you :) – Brahmanism

Answer 7

I think this will help you:

import 'package:flutter/services.dart';

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

Sidle

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

Klondike

This is te best answer sor far. With the others you get a lot of inconsistencies in iOS, especially when you don't have an AppBar. – Revkah

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

Blatant

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

Maddalena

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

Spindling

this is tested for SafeArea in ios also? – Magnoliamagnoliaceous

Answer 12

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

Silvas

Plagiarized from here. – Buckboard

Answer 13

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

Irreversible

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

Bedlam

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

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 – Lemniscate

Answer 15

This one will also work

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

Insulation

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

Fridge

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

Trothplight

Answer 18

Works for both iOS and Android

import 'package:flutter/services.dart';

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

  return Scaffold();
}
    

Charmine

Answer 19

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

Novena

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

Answer 20

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.

Dearborn

Answer 21

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

Aglimmer

Does this work for iOS? – Alodium

Answer 22

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

Destructor

Why is your code in "Put the code below on the single screen's build function to AFFECT this screen only" snippet is outside build function? is it correct? – Unpredictable

Answer 23

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

Inspan

Answer 24

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,

Very

Answer 25

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

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

Fleetwood

Answer 26

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

Geophilous

Answer 27

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.

Darnel

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

Answer 28

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

Novara

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

Idolatrize

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

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

Oliveolivegreen

Thanks it works great! – Wohlert

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

Headpiece

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.

Concinnate

Why doesn't setting statusBarColor work on iOS? – Alodium

Answer 33

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

Ingrained

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

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.

Andalusite

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

Unset

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.

Splash

Answer 37

At Flutter 2.8:

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

Section

Answer 38

In Your App Bar Widget please add this

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

Mcclanahan

Answer 39

Solution for changing status bar color both on Android and iOS (working) (DEC-2023)

credits to @Mohamed Nor : see answer

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0, //if you don't want to use AppBar
        backgroundColor: Colors.red,
      ),
      body: SafeArea(
        child: YourWidget()
    )
    )
}

Steinway

Answer 40

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

Waisted

Answer 41

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

In the main screen:

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

Alvertaalves

The question is about changing status bar color, and while it will be wrapped with safeArea it won't change the color – Procne