Flutter application development, the system style can not be changed? SystemChrome status bar, navigation bar, screen orientation...you can change it if you want

development scene

When developing an app, we often need to customize the style and style of the status bar, navigation bar, etc. How does Flutter meet these customization requirements when developing an app?

Customize the style of the status bar and navigation bar: You can use SystemChrome to define the color, text style, etc. of the status bar and navigation bar to meet your design needs.
Hide system-level UI elements: If you want to hide the status bar, navigation bar, or go full screen while your app is running, SystemChrome can help you do that.
Control screen orientation: SystemChrome also provides methods to lock or unlock screen orientation to ensure applications are displayed in a specific orientation.

Introduction to SystemChrome

SystemChrome is a class used in Flutter to control the style and behavior of the system-level interface. It provides methods to modify the appearance and behavior of application windows, such as status bar, navigation bar, screen orientation, etc.

Use of SystemChrome

import SystemChrome package

Before using SystemChrome, you need to import the package:flutter/services.dart package in the file.

import 'package:learning/routes/savecfg.dart';

hide status bar

You can use the SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive) method to hide the status bar.

SystemUiMode.immersive: The system UI is completely hidden, and the user can restore the visibility of the UI from the edge of the screen by swiping. In this mode, the status bar is hidden.

SystemUiMode.immersiveSticky: Similar to SystemUiMode.immersive, but the user can restore UI visibility with a brief touch instead of a full swipe. UI elements will temporarily appear and automatically hide after a period of time.

SystemUiMode.edgeToEdge: In this mode, the application content will extend to the edge of the screen, covering the navigation bar and status bar. The navigation and status bars still exist, but are not visible inside the app.

The effect is as shown in the figure:
Before calling SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive)

after calling

You can see that the status bar that displays information such as battery power and time has been hidden.

illustrate

Here we say SystemUiMode.immersive: The user can restore the visibility of the UI from the edge of the screen by swiping.

Change the style of the status bar

The SystemChrome.setSystemUIOverlayStyle method is used to set the system-level overlay style. This method can receive a SystemUiOverlayStyle object as a parameter, which is used to define the style of the status bar and navigation bar.

SystemUiOverlayStyle is a class used to describe the status bar and navigation bar overlay style. It provides many properties that can be used to define text color, background color, icon brightness, etc. By setting different properties of SystemUiOverlayStyle, a custom system-level style can be realized.

By calling the SystemChrome.setSystemUIOverlayStyle method, you can apply a custom SystemUiOverlayStyle to your application's status bar and navigation bar, thereby changing their appearance.

For example, you can set the status and navigation bars to have dark text and a light background with the following code:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.transparent,
  statusBarBrightness: Brightness.dark,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarColor: Colors.white,
  systemNavigationBarIconBrightness: Brightness.dark,
));

This will make the text of the status bar and navigation bar dark (black or gray), and set the background to a light color (white). By adjusting the different property values ​​of SystemUiOverlayStyle, it can be customized according to the needs of the application.

The call to the SystemChrome.setSystemUIOverlayStyle method is usually placed at the entry point of the application (such as the main function) or in the settings of the theme to ensure that the style takes effect throughout the application.
Use SystemChrome.setSystemUIOverlayStyle to change the style of the status bar. For example, the following example changes the background color of the status bar to red.

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarColor: Colors.red,
  ));

The effect is as follows:

Precautions

Please note that in order to make the style of the status bar take effect, the method SystemChrome.setSystemUIOverlayStyle() needs to be called in the build method of the root Widget of the application. Typically, this is set before the runApp() method.

In addition, this code only takes effect on the Android platform, and the status bar style on the iOS platform cannot be directly controlled by Flutter. On iOS, the style of the status bar is determined by configuration in the app's Info.plist file.

Other Style Notes

In the SystemUiOverlayStyle object, besides setting statusBarColor, you can also set other attributes, such as:
systemNavigationBarColor attribute to define the color of the status bar and navigation bar.
statusBarBrightness, statusBarIconBrightness, systemNavigationBarIconBrightness properties to define the color of the status bar and navigation bar text.
Control screen orientation:

lock screen orientation

Lock screen orientation: Use the SystemChrome.setPreferredOrientations method and pass a List parameter, such as [DeviceOrientation.portraitUp].
Unlock screen orientation: Use the SystemChrome.setPreferredOrientations([]) method, passing an empty List as a parameter to unlock the screen

Lock Screen Orientation Example

The example I wrote is a vertical screen, and the screenshot above can also be seen. Now I will convert it to a horizontal screen display. Add the following code:

    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);

The display effect is shown in the figure.

The physical picture:

Precautions

With this setup, even if the user rotates the device, the application will remain in landscape mode and will not automatically switch to portrait mode.
The SystemChrome.setPreferredOrientations method is usually called before the application's root widget's build method to ensure that the preferred orientation setting takes effect.