从 dp / px 原理到 1024px 导出，一篇讲清楚
在 Flutter 项目中配置启动图（Splash Screen），是很多新手甚至老手都会踩坑的地方：
- dp 和 px 到底有什么区别？
- 为什么说 Logo 要放在 160dp 的安全区？
- Figma 里我到底该画多大？
- 为什么教程又说要导出 1024px？
- flutter_native_splash 能不能用 SVG？
这篇文章我会 从原理讲到实操，一步步带你把 Flutter 启动图这件事彻底搞清楚。
省流版：
- 品牌图片：尺寸必须为 200×80 dp。
- 带有图标背景的应用图标：尺寸必须为 240×240 dp，并且位于直径 160 dp 的圆圈内。
- 无图标背景的应用图标：尺寸必须为 288×288 dp，并且位于直径 192 dp 的圆圈内。
一、Flutter / Android 启动图的核心思想
先说一个最重要的结论：
启动图不是“全屏海报”，而是“居中的 Logo + 背景色”
Android（以及 Flutter 使用的 Android SplashScreen API）在不同设备上，会对启动图进行 裁剪和缩放，真正安全可见的区域，是一个 圆形安全区。（这个应该是基于Android12之后的。Android 11 及以下 是直接放一张满屏的启动图。）
二、dp 和 px 的区别（人话版）
1️⃣ px 是什么？
- px = 像素
- 是屏幕上最小的物理点
问题是：
不同手机，像素密度完全不同
同样 160px，在不同手机上看起来大小不一样
2️⃣ dp 是什么？
- dp = density-independent pixel（与密度无关的像素）
- 是 Android / Flutter 用来保证 “看起来一样大” 的单位
简单理解：
dp 决定“看起来多大”，px 决定“清不清楚”
3️⃣ 关键结论（一定要记住）
在 Figma 里：1px ≈ 1dp（逻辑等价）
也就是说：
- 你在 Figma 里画 160px
- 在 Flutter / Android 里就是 160dp 的视觉尺寸
三、为什么是 160dp？启动图安全区解释
Android 官方对启动图图标有明确规则：
- 启动图会被放进一个 圆形 Mask
- 只有圆内的内容是 100% 安全的
- 圆外内容在某些设备上一定会被裁掉
推荐安全区
- 安全圆直径：160dp
- 超出这个范围：有被裁风险
四、Figma 中正确的启动图画法
Step 1：创建画布
- 新建 Frame
- 尺寸：288 × 288
- 单位：px（默认即可）
288dp 是 Android 启动图推荐的最大逻辑画布
Step 2：画安全圆
- 在画布中画一个 160 × 160 的圆
- 水平 + 垂直居中
- 作为辅助参考（可以加描边）
所有 Logo 内容 必须完全放在圆内
Step 3：设计 Logo
- Logo、文字、图形全部放在安全圆内
- 圆外只作为留白或背景
五、那为什么又要“导出 1024px”？（重点）
这里是最多人迷糊的地方。
1️⃣ 160dp 是什么？
- 是 设计规则
- 决定 Logo 看起来多大
- 决定会不会被裁
2️⃣ 1024px 是什么？
- 是 导出清晰度
- 决定图片在高分屏上会不会糊
3️⃣ 二者不冲突
可以这样理解：
我按 160dp 的规则来画 再用 1024px 的分辨率来导出
就像：
- 同一张证件照
- 用 500 万像素拍 or 5000 万像素拍
- 脸的比例一样，只是清晰度不同
六、Figma 导出 1024px PNG 的正确方式
⚠️ 不需要重新画 1024 的画布
正确步骤：
- 选中 288 × 288 的最外层 Frame
- 右侧找到 Export
- 格式选择：PNG
- 把
1x改成：1024 ÷ 288 ≈ 3.56x （不正规）
导出后就是：
1024 × 1024 px 的启动图 PNG
推荐的省心方案（更简单）
直接用：
- 4x
- 导出尺寸：1152 × 1152 px
这个尺寸：
- 更清晰
- 无副作用
- flutter_native_splash 完全支持
七、为什么 flutter_native_splash 不能用 SVG？
因为不支持，我导入之后 flutter pub run flutter_native_splash:create 后直接报 Your image must be in one of the following formats: [png, apng, jpg, jpeg, jpe, jfif, tga, tpic, gif, ico, bmp, dib]
最后建议大家看官方文档https://developer.android.com/develop/ui/views/launch/splash-screen?hl=zh-cn
