flutter_native_splash配置异常：启动页Logo模糊、底部品牌图无法全屏适配

嘿，我之前也碰到过类似的糟心问题，咱们一步步来把这两个问题解决掉：

一、搞定启动页Logo模糊的问题 #

Logo模糊大多是图片缩放适配或者分辨率匹配不到位导致的，试试这几个方案：

1. 优先用矢量图（SVG）当Logo
   矢量图怎么缩放都不会模糊，这是最优解。把你的Logo导出成SVG格式（导出时别转成位图），然后把pubspec.yaml里的image参数换成SVG的路径就行，比如image: assets/images/logo.svg。插件会自动给不同平台生成适配分辨率的清晰启动图，完全不用纠结缩放的问题。

2. 要是坚持用PNG，就准备多分辨率的图
   如果你必须用PNG格式，就得给不同分辨率的设备准备对应尺寸的Logo：

• Android：分别做mdpi(48x48)、hdpi(72x72)、xhdpi(96x96)、xxhdpi(144x144)、xxxhdpi(192x192)的Logo，放到对应的android/app/src/main/res/mipmap-*文件夹里，然后pubspec里的image指向xxxhdpi的图，插件会自动匹配对应设备的分辨率。
• iOS：准备@1x(48x48)、@2x(96x96)、@3x(144x144)的图，放到ios/Runner/Assets.xcassets/AppIcon.appiconset里就行。

3. 调整配置里的image_mode参数
   在pubspec的flutter_native_splash配置中，给全局和Android 12的配置都加上image_mode: center，这样插件会保持Logo的原始尺寸居中显示，不会随意缩放导致模糊。举个配置例子：

   flutter_native_splash:
     color: "#FFFFFF"
     image: assets/images/logo_1024.png
     image_mode: center # 新增这个参数
     branding: assets/images/skyline2_3000.png
     branding_mode: bottom
     # 其他配置...
     android_12:
       color: "#FFFFFF"
       image: assets/images/logo_1024.png
       image_mode: center # Android 12配置也要加
       branding: assets/images/skyline2_3000.png
       branding_mode: bottom
       # 其他Android 12配置...
   

二、让底部品牌图（skyline）全屏适配宽度 #

你的skyline图没法全屏，是因为默认的branding图会以原始尺寸居中显示，得调整配置强制它拉伸填充宽度：

1. 加上branding_fit: fill参数
   这是核心！在flutter_native_splash的全局和Android 12配置里都加上branding_fit: fill，这样不管屏幕宽度多少，branding图都会拉伸填充整个宽度，同时保留branding_mode: bottom让它固定在底部。配置示例：

   flutter_native_splash:
     color: "#FFFFFF"
     image: assets/images/logo_1024.png
     branding: assets/images/skyline2_3000.png
     branding_mode: bottom
     branding_fit: fill # 新增这个参数，强制全屏填充
     # 其他配置...
     android_12:
       color: "#FFFFFF"
       image: assets/images/logo_1024.png
       branding: assets/images/skyline2_3000.png
       branding_mode: bottom
       branding_fit: fill # Android 12配置也要加
       # 其他Android 12配置...
   

2. 优化skyline图的比例
   虽然设置了拉伸，但如果skyline图的高度比例太夸张，拉伸后可能会变形。建议制作时让宽度远大于高度，比如宽度3000px，高度控制在100-200px左右，这样适配不同屏幕时变形会非常不明显。

最后，别忘重新生成启动页 #

修改完配置后，按这个顺序操作确保缓存全清干净：

• flutter pub run flutter_native_splash:remove
• flutter clean
• flutter pub get
• flutter pub run flutter_native_splash:create
• 卸载旧APP后重新安装测试

这样应该就能完美解决你的两个问题了！

内容来源于stack exchange