Flutter修改状态栏颜色

修改AppBar中状态栏颜色

在AppBar控件中添加systemOverlayStyle参数，SystemUiOverlayStyle主要包含三个参数：

1. (only for Android) statusBarColor：状态栏背景颜色；
2. (only for Android)statusBarIconBrightness：状态栏字体和图标颜色，设置为Brightness.dark时为黑色字体和图标，Brightness.light时为白色字体和图标；
3. (only for iOS)statusBarBrightness：状态栏字体和图标颜色，设置为Brightness.dark时为字白色字体和图标，Brightness.light时为黑色字体和图标；

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Colors.green, // <-- SEE HERE
    statusBarIconBrightness: Brightness.dark, //<-- For Android SEE HERE (dark icons)
    statusBarBrightness: Brightness.light, //<-- For iOS SEE HERE (dark icons)
  ),
  centerTitle: true,
  title: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'assets/images/logo.png',
        scale: 12,
      ),
      const SizedBox(
        width: 10,
      ),
      const Text(
        'Flutter',
        style: TextStyle(color: Colors.black),
      ),
    ],
  ),
)

全局修改状态栏颜色

在MaterialApp控件中指定theme参数，可以设置全局主题，theme参数类型为ThemeData，其中再传入appBarTheme参数用于指定标题栏主题。

AppBarTheme中指定systemOverlayStyle参数来设置状态栏颜色。

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.black),
      color: Colors.deepPurpleAccent,
      foregroundColor: Colors.black,
      systemOverlayStyle: SystemUiOverlayStyle( //<-- SEE HERE
        // Status bar color
        statusBarColor: Colors.green,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
      ),
    ),
  ),
  home: ChangeStatusBarColorDemo(),
);

没有AppBar时修改状态栏颜色

当没有AppBar控件又需要改变状态栏颜色时，可以使用AnnotatedRegion控件。

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>( 
    value: SystemUiOverlayStyle.dark, //<-- SEE HERE
    child: Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text(
                'Elevated Button 1',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}