【Flutter】Flutter 启动图标制作 ( 使用 flutter_launcher_icons 插件自动生成 Android / iOS 平台使用的适配各个屏幕分辨率的图标 )

📅 2026/7/11 6:21:58
【Flutter】Flutter 启动图标制作 ( 使用 flutter_launcher_icons 插件自动生成 Android / iOS 平台使用的适配各个屏幕分辨率的图标 )
文章目录前言一、flutter_launcher_icons 简介1、简介2、原理二、使用步骤1、引入依赖2、准备图标资源3、编写插件配置4、执行生成命令5、验证与生效总结参考文档 :Flutter 官方文档 : https://docs.flutter.dev/install/quick使用出现网络问题 , 参考 在中国网络环境下使用 Flutter 文档 ;使用 VS Code 开发 Flutter 环境安装 :https://docs.flutter.cn/install/with-vs-codeVS Code 安装 :https://code.visualstudio.com/docs/setup/setup-overview前言在 Flutter 跨平台应用开发中 , 桌面启动图标是应用的第一视觉入口 ;默认生成的 Flutter 官方图标仅适用于开发调试阶段 , 正式上架前必须替换为业务专属图标 ;如果手动为 Android、iOS 分别切出十几种不同分辨率的图标 , 不仅效率低下 , 还容易出现尺寸不规范、平台适配错误的问题 ;flutter_launcher_icons是Flutter 生态中最主流的启动图标自动生成工具 , 只需提供一张高清原图 , 即可一键生成符合各平台规范的全尺寸图标 , 大幅简化配置流程 ;本文将详细介绍该插件的完整配置与使用方法 , 以及保证图标最终显示精度的核心注意事项 ;一、flutter_launcher_icons 简介1、简介flutter_launcher_icons是一款专门用于 Flutter 项目的命令行工具 , 核心作用是根据单张高清原图 , 自动生成 Android、iOS、Web、Windows、macOS 等多平台所需的全部尺寸启动图标, 并自动写入对应平台的资源目录 , 无需开发者手动切图和替换文件 ;该插件支持 Android 自适应图标、iOS 透明通道移除、平台差异化图标配置等高级特性,完全符合 Google 与 Apple 的官方设计规范, 是 Flutter 项目打包上线前的标配工具 ;2、原理插件的工作逻辑可以分为三步 :读取pubspec.yaml中的配置参数 ,获取原图路径、目标平台、特殊规则等信息 ;以提供的高清原图为基底 , 按照各平台官方的图标尺寸规范 , 自动进行缩放、裁剪、背景填充等处理 ;将生成的各尺寸图标文件 , 自动写入对应平台的资源目录( Android 的mipmap目录、iOS 的Assets.xcassets/AppIcon目录等 ) , 并自动更新平台配置文件 ;整个过程无需人工干预 , 既保证了图标尺寸的规范性 , 也避免了手动替换导致的资源遗漏问题 ;二、使用步骤1、引入依赖首先 , 在项目的pubspec.yaml文件中 , 将插件添加到dev_dependencies节点下 :dev_dependencies:# 启动图标生成插件flutter_launcher_icons:^0.14.4添加完成后 , 在终端执行以下命令拉取依赖 :flutter pub get该步骤的目的是 安装 flutter_launcher_icons 插件 , 之后使用 flutter_launcher_icons 插件 对 准备的 1024x1024 的图标进行自动切图 ;2、准备图标资源准备一张 1024×1024 像素的 PNG 格式原图 , 建议使用透明背景、无圆角的正方形图标 , 插件会自动根据平台规则进行裁剪适配 ;将图片放入项目的资源目录中 , 推荐路径为 assets/app_icon.png , 目录结构示例 :Flutter 项目根目录 └── assets └── app_icon.png⚠️图标精度核心注意事项 ( 非常重要 ) :请直接使用 1024×1024 原始尺寸的高清原图 , 不要对图片进行任何手动压缩、画质优化、体积瘦身处理 ;即便从设计工具 ( 如即梦 ) 导出的原图体积在 4MB 左右 , 也可以直接丢给插件使用 , 不要擅自将图片优化压缩到 1MB 以下 ;插件内部会基于高清原图进行各尺寸的精准缩放生成 ; 若提前人为压缩图片 , 会导致最终生成的各分辨率图标出现模糊、边缘锯齿、细节丢失等问题 , 最终显示效果会大打折扣 ;原图请勿提前裁剪圆角或异形 , Android 与 iOS 的图标遮罩规则不同 , 使用正方形原图可保证最佳适配效果 ;3、编写插件配置在 pubspec.yaml 文件的最底部 , 添加 flutter_launcher_icons 的配置项 ; 这里提供两种常用配置方案 , 可按需选择 ;基础通用版 ( Android iOS 双平台 ) :适合快速上线 , 满足绝大多数场景需求 :flutter_launcher_icons:# 原图路径image_path:assets/app_icon.png# 开启对应平台android:trueios:true# 移除 iOS 图标透明通道 ( 避免出现黑边 )remove_alpha_ios:true进阶适配版 ( 含 Android 自适应图标 ) :适配 Android 8.0 的自适应图标规范 , 支持前景层 背景层分离 , 显示效果更规范 :flutter_launcher_icons:image_path:assets/app_icon.pngandroid:trueios:trueremove_alpha_ios:true# Android 自适应图标配置android_adaptive_icon:trueandroid_adaptive_icon_foreground:assets/app_icon.pngandroid_adaptive_icon_background:#ffffff4、执行生成命令配置完成后 , 在项目根目录的终端中执行生成命令 :flutter pub run flutter_launcher_icons完整命令行输出 :D:\002_Project\001_Flutter\client_terminalflutter pub run flutter_launcher_icons Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!Deprecated. Usedart runinstead. Building package executable...(1.4s)Built flutter_launcher_icons:flutter_launcher_icons. ════════════════════════════════════════════ FLUTTER LAUNCHER ICONS(v0.14.4)════════════════════════════════════════════ • Creating default icons Android • Overwriting the default Android launcher icon with a new icon • Overwriting default iOS launcher icon with new icon No platform provided ✓ Successfully generated launcher icons D:\002_Project\001_Flutter\client_terminal5、验证与生效生成完成后 , 可在对应平台目录查看生成的图标资源 :Android :图标文件生成在 android/app/src/main/res/mipmap-* 各分辨率目录下 ;iOS :图标文件生成在 ios/Runner/Assets.xcassets/AppIcon.appiconset/ 目录下 ;如果修改图标后重新生成 , 建议先卸载设备上的旧应用 , 再执行以下命令清理缓存后重新运行 , 避免系统图标缓存不更新 :flutter clean flutter pub get flutter run总结以上就是 Flutter 项目中使用 flutter_launcher_icons 配置桌面启动图标的完整流程 ;该插件通过自动化的方式解决了多平台图标切图的繁琐工作 , 只需一张高清原图即可完成全平台适配 , 大幅提升了开发效率 ;flutter_launcher_icons 插件 使用过程中需要重点注意 :原图建议使用 1024×1024 的正方形 PNG 原图 , 不要自行压缩优化图片体积 , 保留原始最高精度直接交给插件处理 , 才能保证最终生成的图标清晰锐利 ;iOS 平台务必开启 remove_alpha_ios , 避免图标出现黑边 ;Android 正式项目建议配置自适应图标 , 符合系统设计规范 ;