Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

SystemChrome is used when switching between vertical and horizontal screens. It is understood that it is a global property, much like Android’s Application, which is very powerful.

setPreferredOrientations

In our daily application, different requirements such as setting vertical and horizontal screens or locking single directional screens may be achieved through setPreferredOrientations. The overall landscape can be easily distinguished by portraitUp/portraitDown/landscapeLeft right/landscapeRight;

Tips: landscapeLeft is made from the portraitUp clockwise rotated 90 degrees; The overall landscape ight is made by counter-clockwise rotation of 90 degrees, so the vision is opposite.

1. The single direction

If you want to fix the application to a single direction, just set the required direction attributes.

/ / vertical SystemChrome setPreferredOrientations ([DeviceOrientation. PortraitUp]); / / under vertical SystemChrome. SetPreferredOrientations ([DeviceOrientation. PortraitDown]); / / level left SystemChrome setPreferredOrientations ([DeviceOrientation. LandscapeLeft]); / / level right SystemChrome setPreferredOrientations ([DeviceOrientation. LandscapeRight]);Copy the code

2. More direction

If you need to apply the direction change with gravity induction, you need to set multiple direction attributes;

/ / vertical SystemChrome. SetPreferredOrientations ([DeviceOrientation. PortraitUp, DeviceOrientation. PortraitDown]); / / horizontal SystemChrome. SetPreferredOrientations ([DeviceOrientation. LandscapeLeft, DeviceOrientation landscapeLeft]); / / direction SystemChrome. SetPreferredOrientations ([DeviceOrientation. LandscapeLeft, DeviceOrientation landscapeLeft, DeviceOrientation.portraitUp]);Copy the code

Tips:

  1. Note that the portraitDown attribute generally does not work in multiple directions. By default, the system will not reverse the portraitDown attribute.
  2. There are two initial directions in multi-direction setting. The first one is: The current gravity induction direction is not in the multi-direction setting list, and the initial direction is the first setting method in the list. Second: Current gravity sensor Direction In the multi-direction setting list, the current gravity sensor direction (not portraitDown) is displayed by default, no matter which position is in the order.

setEnabledSystemUIOverlays

Visible setEnabledSystemUIOverlays is specified in the application runtime system, mainly to the operation of the status bar, read more man, but the test case is clear; Top/bottom/bottom;

1. SystemUiOverlay.top

By default, the virtual status bar at the bottom is hidden (if the mobile phone supports the virtual status bar device), that is, the three diamond keys; The status bar is displayed after the focus is obtained. The display size is the overall size when the status bar is removed.

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
Copy the code

2. SystemUiOverlay.bottom

By default, the top virtual status bar is hidden, and the status bar is displayed after the focus is obtained. The display size is the overall size when the status bar is removed.

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
Copy the code

3. Both

By default, the top and bottom status bars are displayed;

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);
Copy the code

setSystemUIOverlayStyle

SetSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle: setSystemUIOverlayStyle

1. systemNavigationBarColor

This property only applies to Android devices and SDK >= O, the bottom status bar color;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));
Copy the code

2. systemNavigationBarDividerColor

This property is only used for Android devices and SDK >= P, the bottom status bar and the main content color separation line, the effect is not very obvious;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow));
Copy the code

3. systemNavigationBarIconBrightness

This property is only used for Android devices and SDK >= O, the bottom status bar icon style, mainly the three key colors;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));
Copy the code

4. statusBarColor

This property only applies to Android devices and SDK >= M, the top status bar color;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red));
Copy the code

5. statusBarIconBrightness

This property only applies to Android devices with SDK >= M and the brightness of the icon in the top status bar; But the side dishes don’t feel obvious;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark));
Copy the code

6. statusBarBrightness

This property only applies to the top status bar brightness on iOS devices;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarBrightness: Brightness.light));
Copy the code

setApplicationSwitcherDescription

Xiaokai personally understand that the display effect of this attribute is in the current state of the application related to the application switcher, but xiaokai repeatedly tested and did not have the actual effect, hope to have understanding of the big god more advice;

SystemChrome.setApplicationSwitcherDescription(
        const ApplicationSwitcherDescription(
            label: "Demo Flutter", primaryColor: 0xFFE53935))
    .then((_) {
  runApp(new MyApp());
});
Copy the code

On the whole, Flutter is very convenient for setting up the top and bottom status bars, but there are some small things that I don’t understand deeply enough.

Source: Little Monk A Ce