Flutter separate page status bar color changes backgroundColor and statusBarColor

1. In flutter, if the color of the status bar of the entire application is the same color, it can be set in the main method:

//Set status bar color
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, //status bar background color
    statusBarIconBrightness: Brightness.dark // dark: generally display black light: generally display white
    ));

2. Some pages may need the color of the status bar to be close to the color of the current page, and need to be modified separately, then set it in the appbar of the page:

   appBar: AppBar(
              elevation: 0,//去除状态栏下的一条阴影
              toolbarHeight: 0,
              systemOverlayStyle: SystemUiOverlayStyle(
                // statusBarColor: R.color.WHITE,
                  statusBarColor: Colors.transparent,
                systemNavigationBarColor: Color(0xFF000000),
                systemNavigationBarIconBrightness: Brightness.light,
                statusBarIconBrightness: Brightness.dark,
                statusBarBrightness: Brightness.light,
              ),
              // systemOverlayStyle: SystemUiOverlayStyle.dark,
              backgroundColor: R.color.WHITE,
            ),

Both backgroundColor and statusBarColor here change the color of the status bar. statusBarColor is only valid for machines above Android 6.0, and statusBarColor will overwrite backgroundColor. If statusBarColor is set on the previous page and is not reset on this page, it will display It is still the statusBarColor of the previous page; when the statusBarColor is set to a transparent color, the color of the status bar is the backgroundColor.

For the page itself, there is not much difference between statusBarColor and backgroundColor, but when this page uses a pop-up window, if the statusBarColor is not transparent, the color of the status bar at the top of the pop-up window will also be statusBarColor instead of shadow coverage, so there is a pop-up window It is better to set the statusBarColor to transparent and the backgroundColor to the desired status bar color, so that the display effect is better, emmmmmmm.

 

 This is almost the difference. I feel that the statusBarColor may be the top layer of the modification. I don’t understand it.

Guess you like

Origin blog.csdn.net/QhappyfishQ/article/details/129166857