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.

Answer 1

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!