Set Status Bar Background Color When App Bar is Not Present in Flutter

In our previous tutorial about this topic we have learn about changing status bar color on App Bar present but sometimes app developer needs to change the Set Status Bar Background Color When App Bar is Not Present in Flutter Android iOS application. This can be possible using SystemChrome.setSystemUIOverlayStyle() function. This function allow us to modify app specific configurations.

Note: iOS devices dose not support changing Status bar background color. But we can change their Icons color to light and dark only.

Contents in this project Set Status Bar Background Color When App Bar is Not Present in Flutter Android iOS App:

1. Import material.dart and services.dart package in your main.dart file.

2. Call our main MyApp class using runApp() function.

3. Create our main MyApp widget class extends with State less widget.

4. Create SystemChrome.setSystemUIOverlayStyle() in widget build area in MyApp class.

  • statusBarColor : Used to set Status bar background color in Android devices.
  • statusBarIconBrightness : Used to set Status bar icons color to light and dark.
  • statusBarBrightness : Used to set Status bar icons to white and black in iOS devices.

5. Create a Text widget in Scaffold widget -> Center widget -> Column widget.

6. Complete source code for main.dart file:

Screenshot in Android device:

Set Status Bar Background Color When App Bar is Not Present in Flutter

Screenshot in iOS device:

Leave a Reply

Your email address will not be published.