Flutter设置systemNavigationBarColor修改系统导航栏颜色不生效

需要根据应用主题动态修改系统导航栏systemNavigationBar颜色，尝试将SystemOverlayStyle配置在AppBarTheme中实现效果，但配置未生效。
原有实现代码：

ThemeData get light => ThemeData(
        appBarTheme: AppBarTheme(
          iconTheme: lightBase.iconTheme,
          backgroundColor: Colors.transparent,
          elevation: 0,
          centerTitle: true,
          titleTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 17,
            color: AppColors.textDark,
          ),
           systemOverlayStyle:
              SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink),
        ),
      );

实际运行效果：

AppBarTheme下的systemOverlayStyle仅会在AppBar渲染时生效，作用范围仅限当前页面AppBar关联的状态栏样式，不会全局生效，也不会覆盖系统导航栏的全局默认配置。如果页面没有AppBar，这个配置完全不会触发，自然达不到随主题动态修改导航栏颜色的效果。

• 方案1：全局主题配置（推荐，支持主题动态切换）
  将systemOverlayStyle从AppBarTheme中移到ThemeData根层级配置，全局所有页面都会继承该样式，主题切换时会自动同步更新系统导航栏颜色：

ThemeData get light => ThemeData(
  // 直接在ThemeData根节点配置系统样式，全局生效
  systemOverlayStyle: const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.pink, // 自定义系统导航栏颜色
    systemNavigationBarIconBrightness: Brightness.light, // 适配导航栏图标/文字亮度，避免看不清
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ),
  appBarTheme: AppBarTheme(
    iconTheme: lightBase.iconTheme,
    backgroundColor: Colors.transparent,
    elevation: 0,
    centerTitle: true,
    titleTextStyle: const TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 17,
      color: AppColors.textDark,
    ),
    // 此处无需重复配置systemOverlayStyle，会自动继承全局配置
  ),
);

配置完成后，确保MaterialApp的theme、darkTheme参数正确绑定对应明暗主题实例即可。

• 方案2：单页面单独配置（适合个别页面自定义样式）
  如果只需要给特定页面设置独立的导航栏颜色，可在页面初始化时手动调用系统样式设置方法：

@override
void initState() {
  super.initState();
  // 页面进入时设置专属系统导航栏样式
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.pink,
    systemNavigationBarIconBrightness: Brightness.light,
  ));
}

注意：路由跳转离开该页面时，需要手动调用方法恢复全局默认样式，否则后续页面会沿用当前页面的导航栏配置。

• 兼容校验
  如果以上配置完成后仍不生效，检查Android原生配置文件：
  打开android/app/src/main/res/values/styles.xml，删除android:navigationBarColor相关的硬编码颜色配置，避免原生层配置覆盖Flutter侧的样式设置。

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