Flutter如何修改原生启动页状态栏颜色适配深浅模式

配置不生效核心原因 #

手动修改res/night/styles.xml不生效的核心原因有两个：

• flutter_native_splash: ^2.2.0+1 执行生成命令时，会自动覆盖原生目录下的启动页相关style配置，手动修改的内容会被直接重置
• 现有配置存在逻辑冲突：在深色模式对应的night资源目录下设置白色状态栏、windowLightStatusBar=true本身不符合深色模式的显示逻辑，同时添加的windowTranslucentNavigation=true半透明导航栏属性会强制覆盖状态栏颜色配置，最终导致所有状态栏相关参数失效。

正确配置方式 #

不推荐手动修改原生工程文件，直接通过flutter_native_splash官方提供的配置参数实现双端深浅模式适配，配置后重新生成启动页即可永久生效，不会被后续生成操作覆盖。

1. 添加配置项 #

在项目pubspec.yaml的flutter_native_splash配置节点下，追加双端深浅模式的状态栏、导航栏参数即可，原有启动页背景、logo等配置保持不变：

flutter_native_splash:
  # 原有启动页配置（背景图、logo、圆角等）保留，追加以下内容
  # ---------- Android 浅色模式参数 ----------
  status_bar_color: "#FFFFFF" # 浅色模式状态栏底色，和浅色启动页背景保持一致
  navigation_bar_color: "#FFFFFF" # 浅色模式导航栏底色
  light_status_bar_icons: false # 浅色模式下状态栏图标/文字显示为深色，适配白底
  # ---------- Android 深色模式参数 ----------
  dark_status_bar_color: "#121212" # 深色模式状态栏底色，和深色启动页背景保持一致
  dark_navigation_bar_color: "#121212" # 深色模式导航栏底色
  dark_light_status_bar_icons: true # 深色模式下状态栏图标/文字显示为浅色，适配深色底

  # ---------- iOS 参数 ----------
  ios_status_bar_brightness: dark # 浅色模式下iOS状态栏文字显示为深色
  ios_dark_status_bar_brightness: light # 深色模式下iOS状态栏文字显示为浅色

2. 重新生成启动页 #

配置完成后依次执行以下命令，清除旧构建缓存并重新生成双端原生启动页文件：

flutter clean
dart run flutter_native_splash:create

3. 验证注意事项 #

重新运行前必须完全卸载设备上已安装的旧版本安装包，系统会缓存旧的启动页资源，不卸载会出现配置不生效的假象。

手动修改原生文件的注意事项（不推荐） #

如果一定要手动修改原生配置，首先要移除android:windowTranslucentNavigation、android:windowTranslucentStatus两个半透明属性，这类属性会强制覆盖状态栏颜色配置；其次修正night目录下的配置逻辑：res/night/styles.xml中android:windowLightStatusBar需设为false（深色模式下图标为浅色，不需要浅色状态栏标记），android:statusBarColor设置为和深色启动页一致的深色值，不要设置为白色。

对应启动页效果参考：

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