当我们使用AppBar时，如何在Flutter中更改状态栏的颜色？

Question

I know we can change the Status Bar using:

• SystemChrome.setSystemUIOverlayStyle
• AnnotatedRegion

But the docs mention the AppBar will set the Status Bar color automatically, so the question I have is, how do I set the Status Bar color, when I have an AppBar in place, but I want to define a specific color myself and not let the AppBar do it automatically?

Answer 1

I want to define a specific color myself and not let the AppBar do it automatically?

Using SystemChrome will override the Appbar setting.

If you want to set the color yourself use the following function you already mentioned once or in an initstate function.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.yellow.shade600,
  statusBarBrightness: Brightness.light,
  statusBarIconBrightness: Brightness.dark,
));

This will override the Appbar setting

Answer 2

Additional Note: Status bar Icon Color

if the status bar icon not changing to dark or light mode. Make sure to add brightness in appbar.

appbar :Appbar (
 brightness: Brightness.light,),

Can be change to .dark or .light as above