CODEWITHSUNDEEP
androidiosuser-interfaceflutterstatusbar
princeoo7
princeoo7

Reputation: 1121

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

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.

Upvotes: 13

Views: 30651

Answers (10)

Prashant Gosai
Prashant Gosai

Reputation: 1227

There are two things we do not merge in AppBar.

  1. backgroundColor
  2. SystemUiOverlayStyle

check the below code. Use backgroundColor OR systemOverlayStyle

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

Upvotes: 0

Abhimanyu
Abhimanyu

Reputation: 14757

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

Light

Dark Theme

SystemUiOverlayStyle.dark

Dark

Custom

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

Custom Status bar

Custom Nav bar

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

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

  1. 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.

Upvotes: 26

igokom
igokom

Reputation: 189

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

Upvotes: -1

Hundenberg
Hundenberg

Reputation: 47

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

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 267404

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

Upvotes: 5

Abdulmalek Dery
Abdulmalek Dery

Reputation: 1016

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

Upvotes: 1

Swayamshree Mohanty
Swayamshree Mohanty

Reputation: 378

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.

Upvotes: 1

Syed Bilal
Syed Bilal

Reputation: 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
)

Upvotes: -1

Akash Bansal
Akash Bansal

Reputation: 138

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

Upvotes: 1

Hemanth Raj
Hemanth Raj

Reputation: 34769

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!

Upvotes: 28

Related Questions