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

9
  • Possible duplicate of How to change the status bar color in android
    – Dan Field
    Mar 8, 2018 at 21:06
  • You do this with your AndroidManifest, not in dart code
    – Dan Field
    Mar 8, 2018 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 <item name="android:windowLightStatusBar">true</item> is different than <item name="android:statusBarColor">@color/whatever</item> Mar 8, 2018 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. Mar 8, 2018 at 21:47

2 Answers 2

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
));
1
  • 2
    Anyway to do this during the splash screen launch? (I guess not) Jun 25, 2019 at 9:25
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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.