Flutter SystemChrome 小结

Fixed App Orientation

 ➥ Unidirectional

If you need to fix the application to a single direction, you only need to set the required direction properties;

// 竖直上
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
// 竖直下
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);
// 水平左
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
// 水平右
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);

 

➥Multiple directions

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

// 竖直方向
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
// 水平方向
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft]);
// 多方向
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp]);

 

Tips:

1. Please note that the portraitDown property will generally not have an effect in multiple directions, and the system will not be reversed by default;
2. There are two cases for the initial direction in multi-direction setting. The first one: the current gravity sensing direction is not in the multi-direction setting list, and the initial direction is the first setting method in the list; the second: the current gravity sensing direction is in the setting multi-direction list. , regardless of the order, the current gravity sensing direction is displayed by default (not portraitDown )

 

Set the top status bar and bottom system buttons

Top status bar Top status bar Display of time, battery, operator, etc. Hide

**setEnabledSystemUIOverlays** is to specify the system overlay visible when the application is running. It is mainly for the operation of the status bar, which is difficult to read, but it is very clear from the test case; the parameters are divided into **top top/bottom bottom** ;

➥ Only the top status bar SystemUiOverlay.top

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

  

➥ Only the bottom-like system button   SystemUiOverlay.bottom

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

 

➥ Both

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

 

Set status bar color top + bottom

setSystemUIOverlayStyle: used to set the top and bottom styles of the status bar. There are **light** and **dark** modes by default, and you can also customize the style according to your needs;

 ➥ Bottom status bar color  systemNavigationBarColor

该属性仅用于 **Android** 设备且 **SDK >= O** 时，底部状态栏颜色；

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

 

 

 ➥The bottom status bar and the main content dividing line color systemNavigationBarDividerColor

该属性仅用于 **Android** 设备且 **SDK >= P** 时，底部状态栏与主内容分割线颜色，效果不是很明显；

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow));

 

 

 ➥ Bottom status bar icon style systemNavigationBarIconBrightness

该属性仅用于 **Android** 设备且 **SDK >= O** 时，底部状态栏图标样式，主要是三大按键颜色

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

 

  ➥ Top status bar background color  statusBarColor

该属性仅用于 **Android** 设备且 **SDK >= M** 时，顶部状态栏颜色；

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red));

 

 

  ➥Top status bar icon color  statusBarIconBrightness

该属性仅用于 **Android** 设备且 **SDK >= M** 时，顶部状态栏图标的亮度；但小菜感觉并不明显；

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark));

 

  ➥The color of the top status bar  is SystemUiOverlayStyle; this state is available in gray and bright colors

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);