How to make Android status bar light in Flutter

8

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

android
dart
flutter
asked on Stack Overflow Mar 8, 2018 by kalehv • edited May 3, 2018 by kalehv

2 Answers

15

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
));
answered on Stack Overflow Jun 2, 2018 by Colin White
1

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

answered on Stack Overflow Aug 17, 2019 by Shahril aidi • edited Aug 17, 2019 by Shahril aidi

User contributions licensed under CC BY-SA 3.0