51NotePage

Flutter 应用图标适配指南:iOS 和 Android

8 12 月, 2024 | by 51

CleanShot 2024-12-09 at 04.14.54@2x

准备工作

首先,安装 flutter_launcher_icons 包。在终端中:

flutter pub add flutter_launcher_icons
//或者
dart pub add flutter_launcher_icons

然后运行:

dart run flutter_launcher_icons:generate

这时候在根目录就会出现 flutter_launcher_icons.yaml。

准备图标文件

在开始配置之前,需要准备好以下图标文件(建议都使用 1024×1024 像素的 PNG 格式):

  1. 基础图标文件
  2. Android 适配图标的背景层,前景层,单色图标。
  3. iOS 的普通图标,深色模式,灰阶图标(如果很懒可以直接把安卓的单色图标反色)。

这里需要给谷歌孝子说明一下,单色图标和前景也可以是 png 格式的,不一定像 Android Studio 那样必须是 SVG。此外你也不用导出多个尺寸,只要一张高清图 Flutter 就会自动裁切到 Android 和 iOS 里。

将这些文件放在项目的 assets/icons 目录下(当然你也可以选择其他目录)。

具体的设计指南可以参考:

  1. 自适应图标 | Android 开发者
  2. App 图标 | Apple 开发者(我认为深色图标完全可以自己设计,和谐就可以,不用跟着官方的来)

配置文件设置

在项目根目录下创建或修改 flutter_launcher_icons.yaml 文件,添加以下配置:

flutter_launcher_icons:
  # 基础图标配置
  image_path: "assets/icons/image_path_android.png"
  
  # Android 相关配置
  android: "launcher_icon"
  image_path_android: "assets/icons/image_path_android.png"
  min_sdk_android: 21  # 最低支持的 Android SDK 版本
  adaptive_icon_background: "assets/icons/adaptive_icon_background.png"
  adaptive_icon_foreground: "assets/icons/adaptive_icon_foreground.png"
  adaptive_icon_monochrome: "assets/icons/adaptive_icon_monochrome.png"
  
  # iOS 相关配置
  ios: true
  image_path_ios: "assets/icons/image_path_ios.png"
  remove_alpha_channel_ios: true  # 移除 alpha 通道
  image_path_ios_dark_transparent: "assets/icons/image_path_ios_dark_transparent.png"
  image_path_ios_tinted_grayscale: "assets/icons/image_path_ios_tinted_grayscale.png"
  desaturate_tinted_to_grayscale_ios: true

生成图标

配置完成后,只需要运行一条命令就能生成所有平台的图标:

dart run flutter_launcher_icons

RELATED POSTS

View all

view all