Flutter: Customize Status Bar OR Bottom Navigation Bar

Most of the time our designer gives us a challenge with their custom style.

Let’s say they give you a design that does not contain any status bar or Bottom navigation bar how can you remove the status bar and navigation bar or change the color of the status bar and system bottom navigation bar?

Let’s see how can we do these changes.

Customizations Using services Library

The Services library depends on the core dart libraries with the Flutter foundation library exposing the platform (android, ios) service to the app that we are building.

SystemChrome is a class that is responsible for the controlling of OS(android, ios) GUI and its interaction with the app. It is part of the service library that we use to change the status bar color.

The status bar we see is the system UI overlay.

We change the style preference of this overlay style with a SystemUiOverlayStyle.

Just like TextStyle for Text widget we have SystemUiOverlayStyle for SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle style) static method.

setSystemUIOverlayStyle(SystemUiOverlayStyle style)

This method communicates with the platform through SystemChannels to show the system UI overlay (Status bar, bottom navigation bar) with the given style.

Using SystemUiOverlayStyle constants, you can use default constants for style.

SystemUiOverlayStyle.dark SystemUiOverlayStyle.light

But,

The better approach is to use a custom SystemUiOverlayStyle object.

Creating a custom style for the SystemUiOverlayStyle

SystemUiOverlayStyle is a class that takes six named arguments.

1 – systemNavigationBarColor systemNavigationBarColor represents the color of the system’s bottom navigation bar.

Color passed through this parameter will try to replace the default color.

2 – systemNavigationBarDividerColor There is a divider between the SystemBottomNavigationBar and the other content. We use the systemNavigationBarDividerColor parameter to change the color of that divider.

Note: The requested change is displayed only in the Android P or higher versions.

3- systemNavigationBarIconBrightness We can control the icon color of the system’s bottom navigation bar using the systemNavigationBarIconBrightness property.

This property takes the Brightness enum as a parameter.

Brightness.dark makes the icon color darker.

Brightness.light make the icon color lighter.

4- statusBarColor This SystemUiOverlayStyle property is useful to change the color of the status bar.

Here, you can give any color which will display on the screen.

5 – statusBarBrightness This parameter only affects the ios UI. Android users will not see any change in their app.

The purpose of statusBarBrightness is to communicate the status bar brightness (Brightness.dark, Brightness.light) to the internal system. Which will style the app properly.

6 – statusBarIconBrightness Just like systemNavigationBarIconBrightness, we can change the status bar icon brightness by using statusBarIconBrightness.

Here, we also use the Brightness.dark and Brightness.light enums.

Change the Status Bar color by using SystemChrome.setSystemUIOverlayStyle() We put this method inside the main() of our flutter app. We execute this method first and then we want to load the widget tree.

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.amber,
      statusBarBrightness: Brightness.dark,
      statusBarIconBrightness: Brightness.light,
    ),
  );
  runApp(MyApp());
}

Here first system style its overlays according to the given styles and then the runApp() method will load the MyApp() root widget of our application.

You can see the status bar color will change to amber.

Example 1: Make Status Bar Transparent

You have a design where you see there is no status bar color. And you want to create the UI for that design. Now you think about How I can make this status bar transparent from my app.

For that purpose, we use the power of Colors.transparent.

Let’s see

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ),
  );
  runApp(MyApp());
}

You will see that our status bar color becomes transparent.

Example 2: Remove Status Bar

Now you want to go one step ahead and decide to hide the status bar inside flutter.

SystemChrome gives us the setEnabledSystemUIOverlays() which take List as overlay parameters.

Syntax

SystemChrome.setEnabledSystemUIOverlays([List overlays]);

SystemUiOverlay is an enum type that has a defined top and bottom. If we want to hide the system status bar we use this code

void main() {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MyApp());
}

Note: Above code might not work and give you an error that

[ERROR:flutter/lib/ui/ui_dart_state.cc(177)] 
Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized.

For resolving this error we have to use WidgetsFlutterBinding which is the glue that binds the framework to the flutter engine.

We use the static method ensureInitialized() to do the binding first and then enable the given overlay on the screen.

Working Code that removes the status bar will look something like this

void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MyApp());
}

For showing the removed status bar again we use the bellow code

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

Example 3: Remove Status Bar from Single Page

For some use cases, we want to only hide the status bar from only a single page. Just like my last app where I only want to hide the status bar from the login screen and on the other screen status bar should be shown.

For single-page status bar removal, we use a Stateful Widget.

When Stateful widget initialize initState() method will execute so one of these two methods.

@override
void initState() { SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    super.initState();
}

This code will remove the StatusBar and when this page is going to pop we want our status bar back to its initial position for that purpose we will use

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  }

OR

@override
  void dispose() {
    SystemChrome.setEnabledSystemUIOverlays(
        [SystemUiOverlay.top, SystemUiOverlay.bottom]);
    super.dispose();
  }

Keep your content in the SafeArea of your page

When you remove your status bar your content will move up and give an ugly feel for resolving that problem. We can use the flutter SafeArea widget and give our content to it as a Child argument.

 SafeArea(
        child: Column(
          children: [
            Text('this is my body'),
          ],
        ),
      ),

Let’s see

  SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ),

Example 4: Change System Bottom Navigation Color

Now we will see how setSystemUIOverlayStyle() method will change the bottom navigation color of the underlying os(ex: android).

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.amber,
      systemNavigationBarDividerColor: Colors.black,
      systemNavigationBarIconBrightness: Brightness.light,
    ),
  );
  runApp(MyApp());
}

You can see the system’s bottom navigation bar color will change to amber.

Example 5: Transparent System Bottom Navigation Bar

Making the bottom navigation bar transparent we use the Colors.transparent.

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
    ),
  );
  runApp(MyApp());
}

It will give you the effect that the system’s bottom navigation becomes white and that’s why We just add Make icon brightness dark so that we can see the icons. When we press the button os(android, ios) default style will look the same.

Example 6: Remove System Bottom Navigation Bar

It is very unlikely that we want to remove or hide the system’s bottom navigation bar from our app. But we use flutter and we can think of any use case and design for our app. Maybe we want to show our style of back-and-forth navigation for that purpose we want our app to remove the systemBottomNavigationBar.

Let’s see how can we remove it.

void main() {
    WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
  runApp(MyApp());
}

Conclusion

I think this is the better approach to changing the color and other customization of the status bar and the system bottom navigation bar. If you find your solution my purpose is achieved.

Thank you!

Hussain Humdani

Hussain Humdani

while ( ! ( succeed = try() ) );