flutter如何根据设置的主题更改状态栏图标和文字颜色？

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!

Answer 2

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

If an AppBar is used, try with,

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

For default light or dark themes.

Answer 3

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

Answer 4

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.

Answer 5

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
)

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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