Change system bar brightness

Did you know you can control how your app's status bar looks? That's the bar at the top of your screen that shows the time, battery, and notifications.

Sometimes, you might want the status bar icons (like the time) to be light or dark depending on your app's background or theme. Flutter makes this possible.

How to Change the Status Bar Look

You use the SystemChrome.setSystemUIOverlayStyle function. This function takes a SystemUiOverlayStyle object where you can set different properties.

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: mode == ThemeMode.light ? Brightness.light : Brightness.dark, // Only Android
    statusBarIconBrightness: mode == ThemeMode.light ? Brightness.dark : Brightness.light, // Only iOS (inverted) & Android
  ),
);

Let's break down the important parts:

statusBarColor

This sets the color of the status bar itself. Setting it to Colors.transparent is common if you want your app's content to go behind it.

statusBarBrightness

This property affects the overall brightness of the status bar background. It's typically used on Android to tell the system whether the background behind the status bar is light or dark, so the icons can be automatically adjusted. This setting works only on Android.

statusBarIconBrightness

This property controls the color of the icons and text in the status bar. You can set it to Brightness.light for light icons or Brightness.dark for dark icons.

Platform Differences

• statusBarBrightness mainly affects the bar's appearance hint on Android.
• statusBarIconBrightness directly sets icon color on iOS (note: light/dark values might seem inverted compared to Android's logic) and also affects icons on Android.

Notice the code uses a check (mode == ThemeMode.light) to set different icon colors based on whether the app is in light or dark mode.

Important Tip for iOS

Sometimes, the status bar might be hidden when your app starts on iOS. To make sure it appears and respects your style settings, you might need to change a setting in your Xcode project.

Find the Info.plist file and make sure the property View controller-based status bar appearance is set to NO.