2026 年 1 月 – cfv's

从 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% 安全的
圆外内容在某些设备上一定会被裁掉

四、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

七、为什么 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

月度归档： 2026 年 1 月

Flutter 启动图（Splash Screen）完整指南Android