Flutter change status bar brightness to dark

Question

I tried several ways to make status bar icons dark, but after home press and returning to app status bar icons are white! it seems that its flutter bug.

but in iOS it works fine.

i tried these ways :

android app style:

<item name="android:windowLightStatusBar">false</item>

AppBar brightness:

brightness: Brightness.dark

Flutter API:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        statusBarIconBrightness: Brightness.dark
    ));

flutter_statusbarcolor package :

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

FlutterStatusbarcolor.setStatusBarWhiteForeground(false);

refer this links - https://pub.dartlang.org/packages/flutter_statusbar_manager#-readme-tab- - https://pub.dartlang.org/packages/flutter_statusbarcolor#-readme-tab- — , Mar 20 '19 at 05:38

score 17 · Answer 1 · answered Jun 12 '19 at 07:16

17

Add following into your widget tree:

AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.dark,
    child: ...
)

answered Jun 12 '19 at 07:16

Ainius

336
3
11

This one perfectly work on both iOS and Android devices. – Alwin Feb 14 '20 at 00:35

Kenneth Murerwa · Answer 2 · 2021-10-18T06:13:18.173

As of Flutter 2.4.*, AppBar brightness is deprecated. To achieve status bar brightness, add a systemOverlayStyle to your AppBar as I have highlighted below.

appBar: AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark
  ),
)

If you wish to apply dark status bar icons on the entire app, add an appBarTheme to your MaterialApp theme as shown in the following code. Your MaterialApp widget is on the main.dart file;

MaterialApp(
  ...
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark
      ),
    ),
  )
)

score 3 · Answer 3 · answered Apr 06 '19 at 05:16

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

This is only working when there is no appbar. If there is an app bar, this will not work. So you will have to change the brightness of appbar first.

appBar: new AppBar(
        brightness: Brightness.light, // Add this line
      ),

score 1 · Answer 4 · answered Sep 22 '21 at 13:01

If you want to change the theme for the app as a whole, I would recommend this answer to a similar problem: https://stackoverflow.com/a/62607827/15605135

If you want to change a single AppBar, you could try to use the systemOverlayStyle property:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
    );
  }

score 0 · Answer 5 · answered Apr 09 '21 at 08:46

Wrap your widget with SafeArea and include brightness in your appBar and it will work.

  void main()
{
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.deepPurple,
  statusBarBrightness: Brightness.dark,
  ));
  runApp(MyApp());
}
    return SafeArea(child: Scaffold(
      appBar: AppBar(
          toolbarHeight: 50,
          centerTitle: true,
          brightness: Brightness.dark,
          backgroundColor: Colors.deepPurple,
          child: Text("Your Text"),),

score 0 · Answer 6 · answered Sep 21 '21 at 11:44

0

Use:-

systemOverlayStyle: SystemUiOverlayStyle.dark,

instead of:

brightness: Brightness.dark,

answered Sep 21 '21 at 11:44

Walied Abdulaziem

357
3
7

1

This is the same solution as in [this other answer](https://stackoverflow.com/a/56556590/2227743). *When answering older questions that already have answers, please make sure you provide either a novel solution or a significantly better explanation than existing answers.* – Eric Aya Sep 21 '21 at 11:52

score 0 · Answer 7 · answered Jan 26 '22 at 15:38

Apply for all appBar use

return MaterialApp(
        theme: ThemeData(
            appBarTheme: Theme.of(context)
                .appBarTheme
                .copyWith(systemOverlayStyle: SystemUiOverlayStyle.dark)),
        debugShowCheckedModeBanner: false,
        home: widget());

I hope it works.

Flutter change status bar brightness to dark

7 Answers7

Linked