🐟 Flutter 摸鱼指南（三）：图标启动图自动化，10 秒搞定领导说,图标换一下。传统：导出 30 张图，改 1

“图标换一下。”

传统：导出 30 张图，改 10 个配置文件，30 分钟。

Flu CLI：右键 → 选图 → 回车，10 秒。

😵 传统方式有多痛？

任务	操作	用时
App 图标	导出 5 种 Android 尺寸 + 20+ 种 iOS 尺寸 + 放到各种目录 + 改配置	30 分钟
启动图	准备背景图/Logo + 改 XML + 改 Storyboard + 跑命令	20 分钟
暗黑模式	上面全部再来一遍深色版本	15 分钟
总计	-	65 分钟

内心 OS：配个图标启动图，花了一个多小时。

Flu CLI 只要 45 秒。

🚀 Flu CLI 的方式

右键 → 选图 → 完事儿。

🎨 App 图标配置

Step 1：准备一张图

尺寸：1024 x 1024（越大越好）
格式：PNG（透明背景）
内容：你的 App 图标

Step 2：右键启动

在项目根目录或 pubspec.yaml 上右键 → Flu: Config App Assets

Step 3：选择图标

弹出文件选择器，选你准备好的图。

Step 4：等几秒

Flu CLI 自动：

裁剪成所有需要的尺寸
放到正确的目录
更新配置文件
运行生成命令

完事儿。

生成了什么？

Android：

android/app/src/main/res/
├── mipmap-mdpi/ic_launcher.png       (48x48)
├── mipmap-hdpi/ic_launcher.png       (72x72)
├── mipmap-xhdpi/ic_launcher.png      (96x96)
├── mipmap-xxhdpi/ic_launcher.png     (144x144)
└── mipmap-xxxhdpi/ic_launcher.png    (192x192)

iOS：

ios/Runner/Assets.xcassets/AppIcon.appiconset/
├── Icon-App-20x20@1x.png
├── Icon-App-20x20@2x.png
├── Icon-App-20x20@3x.png
├── Icon-App-29x29@1x.png
├── ... (20+ 文件)
└── Icon-App-1024x1024@1x.png

Web、macOS、Windows：也都生成了 ✅

全平台支持

平台	状态
Android	✅ 全尺寸 mipmap
iOS	✅ 全尺寸 AppIcon
Web	✅ favicon.png
macOS	✅ AppIcon
Windows	✅ app_icon.ico

一张图搞定全平台。 🐟🐟🐟

🚀 启动图配置

模式一:纯色背景 + Logo(最常用)

效果：纯色背景，中间放 Logo

┌─────────────────────┐
│                     │
│                     │
│        LOGO         │
│                     │
│                     │
└─────────────────────┘
     背景色填充

配置步骤：

选择「纯色背景」模式
输入背景色（如 #FFFFFF）
选择 Logo 图片

用时：10 秒

模式二:图片背景

效果：自定义全屏背景图

┌─────────────────────┐
│ ░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░LOGO░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░ │
│ ░░░背景图片░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░ │
└─────────────────────┘

配置步骤：

选择「图片背景」模式
选择背景图片
（可选）选择 Logo 图片

用时：10 秒

⚙️ 底层原理

Flu CLI 自动帮你配置了两个包：

1. flutter_launcher_icons

自动添加到 pubspec.yaml：

dev_dependencies:
  flutter_launcher_icons: ^0.14.4

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  min_sdk_android: 21
  web:
    generate: true
    image_path: "assets/icon/app_icon.png"
  windows:
    generate: true
    image_path: "assets/icon/app_icon.png"
  macos:
    generate: true
    image_path: "assets/icon/app_icon.png"

自动运行命令：

dart run flutter_launcher_icons

2. flutter_native_splash

自动添加到 pubspec.yaml：

dev_dependencies:
  flutter_native_splash: ^2.3.10

flutter_native_splash:
  image: "assets/splash/logo.png"
  color: "#FFFFFF"
  android: true
  ios: true
  web: true
  
  # 暗黑模式（如果启用）
  color_dark: "#121212"
  image_dark: "assets/splash/logo_dark.png"

自动运行命令：

dart run flutter_native_splash:create

你不需要手写这些配置，Flu CLI 自动生成。

🔧 后续调整

配置完成后，如果需要微调：

只改图标

替换 assets/icon/app_icon.png
运行：dart run flutter_launcher_icons

只改启动图

替换 assets/splash/ 下的图片
运行：dart run flutter_native_splash:create

改配置

修改 pubspec.yaml 中的相关配置
重新运行上述命令

❓ FAQ

问题	答案
图标尺寸必须 1024x1024 吗？	推荐 1024，最小别低于 512
支持 SVG 吗？	暂时只支持 PNG
生成失败怎么办？	检查 PNG 格式、图片尺寸、查看输出面板
能只配图标不配启动图吗？	可以，启动图选「跳过」
会覆盖现有配置吗？	智能覆盖同名配置，不影响其他
图标支持暗黑模式吗？	目前只支持启动图暗黑适配
Web 的 favicon 在哪？	`web/favicon.png` 和 `web/icons/`

🐟 摸鱼小结

操作	传统	Flu CLI	省时
App 图标	30 分钟	10 秒	29 分 50 秒
启动图（纯色）	20 分钟	10 秒	19 分 50 秒
启动图（图片）	25 分钟	15 秒	24 分 45 秒
暗黑适配(待实现)	15 分钟	10 秒	14 分 50 秒
总计	90 分钟	45 秒	89 分钟

一个项目省 89 分钟，10 个项目省 15 小时。配图标启动图，从此告别折腾。🐟🐟🐟

🎬 实战演示

场景：给 App 换新图标

需求：UI 设计师给了新图标，要求全平台更新。

传统方式：

打开 Figma
导出 Android 5 种尺寸
导出 iOS 20+ 种尺寸
手动放到各种目录
改配置文件
用时 30 分钟

Flu CLI 方式：

右键 → Config App Assets
选新图标
等 10 秒，完事儿

📚 系列文章

💬 交流群：加微信 Huoye-TT 备注 "flu-cli"

⭐ 开源地址：Gitee | 求 Star！

📖 完整文档：huozhiye.cn/flu-cli/

如果这篇文章让你告别了切图，点个赞呗 👍