'Flutter change status bar brightness to dark

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

dart flutter

Solution 1:^[1]

Add following into your widget tree:

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

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

Solution 5:^[5]

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

Solution 6:^[6]

Use:-

systemOverlayStyle: SystemUiOverlayStyle.dark,

instead of:

brightness: Brightness.dark,

Solution 7:^[7]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ainius
Solution 2
Solution 3	Hasitha
Solution 4	tstrmn
Solution 5	ozone wagle
Solution 6	Walied Abdulaziem
Solution 7	Ema

'Flutter change status bar brightness to dark

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]