How to change status bar icon and text color in flutter based on theme been set?

Question

How to update color for status bar icon without any third party plugin ?

in my theme class I have a function in which i am trying below code but not results achieved as of yet:

CODE FOR THEME AS OF NOW:


// custom light theme for app
  static final customLightTheme = ThemeData.light().copyWith(
    brightness: Brightness.light,
    primaryColor: notWhite,
    accentColor: Colors.amberAccent,
    scaffoldBackgroundColor: notWhite,
    primaryTextTheme: TextTheme(
      title: TextStyle(
        color: Colors.black
      ),

    ),
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.black),
      elevation: 0.0,
    )
  );

  // custom dark theme for app
  static final customDarkTheme = ThemeData.dark().copyWith(
    brightness: Brightness.dark,
    primaryColor: Colors.black,
      accentColor: Colors.orange,
      scaffoldBackgroundColor: Colors.black87,
      primaryTextTheme: TextTheme(
        title: TextStyle(
            color: Colors.white
        ),

      ),
      appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Colors.white),
        elevation: 0.0,
      ),

  );

CODE FOR THEME CHANGER:


// set theme for the app
   setTheme(ThemeData theme) {
     _themeData = theme;

     if(_themeData == ThemeChanger.customLightTheme){
       SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(
           statusBarColor: Colors.white,
           systemNavigationBarColor: Colors.white,
           systemNavigationBarDividerColor: Colors.black,
           systemNavigationBarIconBrightness: Brightness.dark,
         ),
       );
     } else {
       SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(
           statusBarColor: Colors.blue,
           systemNavigationBarColor: Colors.blue,
           systemNavigationBarDividerColor: Colors.red,
           systemNavigationBarIconBrightness: Brightness.light,
         ),
       );
     }

     notifyListeners();
   }

This is not what I want as I don't want the third party solution.

Icon's color in status bar (Flutter)

currently I am getting black icons in white / light theme and also black icons ( which should be white icons ) in dark / black theme on theme change. rest is all working well.

Does this answer your question? [How to change status bar color in Flutter?](https://stackoverflow.com/questions/52489458/how-to-change-status-bar-color-in-flutter) — Lakshman Kambam, Apr 21 '21 at 08:48

Hemanth Raj · Accepted Answer · 2019-09-18T15:44:24.200

25

You can set the status bar theme by calling the setSystemUIOverlayStyle with required theme.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

or

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

UPDATE:

You can specify your own properties like,

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

Check for available properties here.

Note: For light theme of app, use dark overlay and vice versa. Also make sure you import 'package:flutter/services.dart';

Hope that helps!

edited Sep 18 '19 at 15:44

answered Sep 18 '19 at 15:14

Hemanth Raj

32,555
10
92
82

by the way what if i want to modify the colors in setSystemUIOverlayStyle. my above code did not worked as you can see i tried playing with blue and red colors. – princeoo7 Sep 18 '19 at 15:41
So I should remove the const word and just use the rest ? Well will try it tomorrow and see if it works – princeoo7 Sep 18 '19 at 17:08
1

For newbie, The question is where to write? – Pratik Butani Apr 02 '21 at 08:51
all of these answers and I still cant see the icons they never change colour. – 68060 Sep 13 '22 at 12:13

score 21 · Answer 2 · edited Feb 16 '23 at 13:59

Note:
The accepted answer works if the set SystemUiOverlayStyle is not overwritten by other widgets like AppBar.

Update

Since many people have this question, adding an answer covering all the cases I can think of.

For all the cases, use the systemOverlayStyle as appropriate.

Light Theme

SystemUiOverlayStyle.light

Dark Theme

SystemUiOverlayStyle.dark

Custom

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  systemNavigationBarColor: Color(0xFF000000),
  systemNavigationBarIconBrightness: Brightness.light,
  systemNavigationBarDividerColor: null,
  statusBarColor: Color(0xFFD59898),
  statusBarIconBrightness: Brightness.light,
  statusBarBrightness: Brightness.dark,
));

Override only the required attributes. The First 3 are for the navigation bar and the remaining 3 are for the status bar.

Default case A constant system overlay style throughout the app without app bars and other widgets which interfere with the system UI overlay style.

Add this code to the root widget of the app inside the build method.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

App with a constant system overlay style A constant theme throughout the app with app bars.

If there are screens without an app bar, add the code given in option 1 and then add this as well.

MaterialApp(
    theme: ThemeData(
        appBarTheme: const AppBarTheme(
            systemOverlayStyle: SystemUiOverlayStyle.light,
        ),
    ),
),

App with App bars with different system overlay styles Each app bar has a different system overlay style.

appBar: AppBar( title: const Text('Title text'), systemOverlayStyle: SystemUiOverlayStyle.light, )

Old answer for version below `2.4.0-0.0`.

brightness attribute is deprecated in AppBar.

This feature was deprecated after v2.4.0-0.0.pre

appBar: AppBar(
    title: const Text('Title text'),
    brightness: Brightness.dark,
),

Use Brightness.light or Brightness.dark as required.

The OP's question is how to change the status bar icons based on the theme set, this answer doesn't answer that at all — alfietap, Jan 01 '23 at 21:27

score 4 · Answer 3 · answered Dec 17 '21 at 14:48

Update (Flutter 2.4.0)

Don't use AnnotatedRegion or AppBar.brightness as they are deprecated, use this instead:

Less customizations:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle.dark, // Both iOS and Android (dark icons)
)

More customizations:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light, // For iOS: (dark icons)
    statusBarIconBrightness: Brightness.dark, // For Android: (dark icons)
    statusBarColor: ...,
  ),
)

`AnnotatedRegion` deprecated? – Emaborsa Feb 16 '23 at 13:53 — Emaborsa, Feb 16 '23 at 13:53

score 2 · Answer 4 · answered Jan 25 '22 at 15:45

I haven't found a way to set the color of the statusbaricons in particular but for me It worked to set the property systemStatusBarContrastEnforced to true.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemStatusBarContrastEnforced: true,
  ));

score 1 · Answer 5 · answered Jan 26 '21 at 05:52

This answer to changing theme did not work for me but I use this. I know both are the same things but in this way, we can work with colour and Icons theme as well.

 SystemChrome.setSystemUIOverlayStyle(
            SystemUiOverlayStyle(
                statusBarColor: Color(0xFFdde6e8),
                statusBarIconBrightness: Brightness.dark),
          );

Swayamshree Mohanty · Answer 6 · 2021-09-01T16:09:38.383

To Change the status bar icon color (to white).

Add this SystemChrome... to your void main(). Before this don't forget to import 'package:flutter/services.dart';.

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
    ),
  );
  runApp(MyApp());
}

After this, if you are using Scaffold() for a screen/page, then in the AppBar(), add this line brightness: Brightness.dark, like this,

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,

Then done.

score 1 · Answer 7 · answered Sep 27 '21 at 21:02

If you are using the theme builder for entire app there is new way to change the brightness (icons color) to be white or black as follow

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      builder: (context, navigator) {
        return Theme(
          data: ThemeData(
              primaryColor: AppColors.primary,
              accentColor: AppColors.accent,
              appBarTheme: AppBarTheme(systemOverlayStyle: 
       SystemUiOverlayStyle.light) ,//this is new way to change icons color of status bar
              fontFamily: 'Poppins'
          ),
          child: navigator,
        );
      },
      
    );
  }
}

score 0 · Answer 8 · answered Apr 27 '23 at 11:23

There are two things we do not merge in AppBar.

backgroundColor
SystemUiOverlayStyle

check the below code. Use backgroundColor OR systemOverlayStyle

appBar: AppBar(
    title: const Text('TEXT_HERE'),
    backgroundColor: Colors.white,
    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarBrightness: Brightness.light,
    ),
  ),

score -1 · Answer 9 · edited Apr 21 '21 at 11:26

-1

If you're using AppBar there's brightness property. You can set the brightness property to dark so the icons of status bar will get white.

AppBar(
    brightness: Brightness.dark
)

edited Apr 21 '21 at 11:26

Omatt

8,564
2
42
144

answered Apr 21 '21 at 07:13

Syed Bilal

1
1

Thank you for your answer but it looks more or less like a duplicate of @Abhimanyu's [answer](https://stackoverflow.com/a/66942220/7451109). – shaedrich Apr 21 '21 at 09:06

igokom · Answer 10 · 2022-09-30T10:06:15.213

I found that the best way to do this is via AppBar widget. If you are not using appbar on exact screen, you can achieve this with implementing dummy transparent appbar:

Scaffold(
      // critical to imitate appbar absence
      extendBodyBehindAppBar: true,
      
      appBar: AppBar(
        // setup your style here
        systemOverlayStyle: SystemUiOverlayStyle.light,
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        toolbarHeight: 0.0,
      ),
      body: ...,
)

How to change status bar icon and text color in flutter based on theme been set?

10 Answers10

Update

Light Theme

Dark Theme

Custom

Old answer for version below `2.4.0-0.0`.

Update (Flutter 2.4.0)

Linked

How to change status bar icon and text color in flutter based on theme been set?

10 Answers10

Update

Light Theme

Dark Theme

Custom

Old answer for version below 2.4.0-0.0.

Update (Flutter 2.4.0)

Linked

Old answer for version below `2.4.0-0.0`.