Flutter Native Splash Screen图片适配异常求助

问题说明 #

通过flutter_native_splash包配置Flutter应用启动页图片后，出现图片适配异常的情况：

当前启动页效果 #

期望实现的启动页效果 #

当前配置文件内容 #

以下是flutter_native_splash-development.yaml的配置代码：

# flutter_native_splash-development.yaml
flutter_native_splash:
color: "#ffffff"
image: assets/icons/splash_icon.png
color_dark: "#121212"
image_dark:
fill: true
assets/icons/splash_icon.png

android_12:
    image: assets/icons/splash_icon.png
    image_dark: assets/icons/splash_icon.png

问题分析与修复方案 #

从配置代码能看出两处关键错误：

• image_dark配置格式错误：该字段应直接指定图片路径，当前嵌套写法会导致深色模式下图片无法正确加载；
• fill: true位置错误：这个控制图片是否填充屏幕的参数，需要和image、color同级，而非嵌套在image_dark下。

修正后的配置代码 #

# flutter_native_splash-development.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/icons/splash_icon.png
  fill: true  # 让图片适配填充整个屏幕
  color_dark: "#121212"
  image_dark: assets/icons/splash_icon.png  # 正确配置深色模式图片路径

  android_12:
    image: assets/icons/splash_icon.png
    image_dark: assets/icons/splash_icon.png
    fill: true  # 为Android 12单独配置图片填充规则

操作步骤 #

1. 将修正后的配置内容替换到你的flutter_native_splash-development.yaml文件中；
2. 重新生成启动页资源：若使用了flavor，运行命令 flutter pub run flutter_native_splash:create --flavor development，否则直接运行 flutter pub run flutter_native_splash:create；
3. 重新编译运行应用，验证启动页效果是否符合预期。

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