14

As the title suggests, this is about Flutter.

Is there any way to switch Android status bar to light mode so that the icons in status bar show up dark? See picture for example.

I tried following possible solutions but none of them worked -

// main.dart
appBar: new AppBar(
      brightness: Brightness.light,
      backgroundColor: Colors.white,
    ),

// MainActivity.kt
// Following 2 lines do change the color of status and nav bars
window.statusBarColor = 0x00000000
window.navigationBarColor = 0x00000000

// This seems to have no effect. Icons are still white.
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

enter image description here

UPDATE

The support for this is in works - https://github.com/flutter/flutter/issues/17231

Harshad Kale
  • 17,446
  • 7
  • 30
  • 44
  • Possible duplicate of [How to change the status bar color in android](https://stackoverflow.com/questions/22192291/how-to-change-the-status-bar-color-in-android) – Dan Field Mar 08 '18 at 21:06
  • You do this with your AndroidManifest, not in dart code – Dan Field Mar 08 '18 at 21:06
  • How do you do this in the AndroidManifest? Also the question that was marked as possible duplicate of is about status bar color. This question is NOT about status bar color. Please note `true` is different than `@color/whatever` – Harshad Kale Mar 08 '18 at 21:44
  • I am able to change status bar color from Dart. It is very much possible to have it set as default darker version of appbar color from Dart. But I am NOT able to change it to light so that icons in it are dark. – Harshad Kale Mar 08 '18 at 21:47
  • https://github.com/flutter/flutter/issues/7347#issuecomment-377071330 might be helpful – Günter Zöchbauer Mar 29 '18 at 03:14
  • @GünterZöchbauer Nop, it's not the same. I am not asking about status bar color. I am asking about status bar mode - dark or light. In light mode, icons automatically turn dark to contrast it. It was introduced with Android v23 as `true` – Harshad Kale May 03 '18 at 01:51
  • Flutter doesn't use Andtoid API, it renders everything by itself. – Günter Zöchbauer May 03 '18 at 02:45
  • @GünterZöchbauer That is a wrong answer. Yes flutter does render things inside an app but system bars are not flutter rendered. This support is in fact being added. https://github.com/flutter/flutter/issues/17231 – Harshad Kale May 03 '18 at 21:36
  • During launch in splash screen the status and navigation bar still can't be set to the light mode. Changing the appearance after the splash screen is not desirable and interrupts the user experience. Why is it not possible to change the mode with true in the main activtiy? – Michael Meister Jun 06 '20 at 18:13

2 Answers2

18

The Flutter team have now added support for light/dark status bar control. To add, import this:

import 'package:flutter/services.dart';

Then add this in your App's build function:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarIconBrightness: Brightness.dark
));
Colin White
  • 1,041
  • 11
  • 22
2

Just additional notes:

To change the status bar icon to dark put the following code

StatusBarIconBrightness: Brightness.light

and add brightness in appbar.

appBar: AppBar(  
brightness: Brightness.light, )

if you would like to use white bg on status bar, then change to .light so that icon can be dark, and .dark for darker status bar with white icon

Shahril aidi
  • 29
  • 3