如何在Flutter中修改系统状态栏的颜色

下面是三种不同场景下的可行实现方式： #

1. 全局统一设置 #

适合整个App状态栏样式统一的场景，在入口函数中调用SystemChrome相关API即可全局生效：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  // 配置全局状态栏样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 自定义状态栏颜色
    statusBarIconBrightness: Brightness.dark, // 状态栏图标颜色：dark=黑色，light=白色
    statusBarBrightness: Brightness.light, // iOS端状态栏亮度适配
  ));
  runApp(const MyApp());
}

如果后续单个页面需要修改样式，在对应页面的initState生命周期中重新调用上述方法覆盖配置即可，页面销毁时可在dispose中恢复原有全局样式。 #

2. 单个页面单独配置 #

2.1 页面自带AppBar的情况 #

优先级高于全局设置，直接通过AppBar的属性配置即可：

AppBar(
  backgroundColor: Colors.green, // AppBar背景色会自动同步到状态栏
  systemOverlayStyle: const SystemUiOverlayStyle(
    statusBarIconBrightness: Brightness.light,
  ),
)

2.2 页面无AppBar的情况 #

用AnnotatedRegion组件包裹当前页面的根组件，即可单独控制当前页面的状态栏样式：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
    ),
    child: Scaffold(
      body: // 你的页面内容代码
    ),
  );
}

3. 常见异常适配 #

• 状态栏设置透明后不显示自定义背景色：将Scaffold的extendBodyBehindAppBar属性设置为true，允许页面内容延伸到状态栏下方即可：

Scaffold(
  extendBodyBehindAppBar: true,
  body: Container(
    color: Colors.yellow, // 此时状态栏背景会自动显示为黄色
  ),
)

• Android低版本不生效：打开安卓项目目录下的android/app/src/main/res/values/styles.xml，在主题配置中添加<item name="android:statusBarColor">@android:color/transparent</item>，交由Flutter端控制状态栏颜色。

内容的提问来源于stack exchange，提问作者Chirza Rahman