flutter 如何设置app的图标?

来源:AI回答,亲测可用。

在 Flutter 中设置 App 图标,最推荐、最高效的方法是使用 flutter_launcher_icons 插件。手动替换每个尺寸的图片非常繁琐且容易出错,而这个插件可以自动为你生成所有适配尺寸。

以下是具体的操作步骤:


第一步:准备图标文件

准备一张高分辨率的图标图片(建议 1024x1024 像素,格式为 .png)。

在你的 Flutter 项目根目录下创建一个 assets 文件夹(如果还没有的话),并将图标放入其中,例如命名为 logo.png

第二步:添加插件依赖

打开项目中的 pubspec.yaml 文件,在 dev_dependencies 下添加该插件:

yaml 复制代码
dev_dependencies:
  flutter_test:
    sdk: flutter
    flutter_launcher_icons: ^0.14.4  # 请检查 pub.dev 获取最新版本

第三步:配置插件

同样在 pubspec.yaml 文件中,添加插件的配置参数(可以放在文件最底部):

yaml 复制代码
flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/logo.png"
  min_sdk_android: 21 # android min sdk warning fix
  # 如果需要 Android 的自适应图标(Adaptive Icon),可以添加以下两行:
  # adaptive_icon_background: "#ffffff" # 背景颜色或背景图
  # adaptive_icon_foreground: "assets/logo_foreground.png" # 前景图

第四步:运行命令生成图标

在终端(Terminal)中运行以下两条命令:

  1. 获取插件:
bash 复制代码
flutter pub get
  1. 执行生成脚本:
bash 复制代码
flutter pub run flutter_launcher_icons

以上执行会有个警告提示Deprecated. Use dart run instead.,更优的方式:

bash 复制代码
dart run flutter_launcher_icons

常见注意事项

  • Android 自适应图标: 从 Android 8.0 开始,建议使用 adaptive_icon。如果你只提供了一张图,插件会将其居中处理,但效果可能不如专门设计的"前景+背景"组合好。
  • 缓存问题: 有时候运行完命令后,模拟器上的图标没有变化。这通常是缓存导致的,请尝试卸载 App 后重新运行 flutter run
  • 图标透明度: iOS 图标不能有透明度(必须是实色背景),否则在上架 App Store 审核时会被拒绝。

手动更改方式(不推荐)

如果你不想使用插件,可以手动替换以下路径的文件:

  • Android: android/app/src/main/res/mipmap-* 目录下的所有文件。
  • iOS: ios/Runner/Assets.xcassets/AppIcon.appiconset 目录下的所有尺寸。

你想了解如何为 Android 设置那种可以变换形状的"自适应图标(Adaptive Icons)"的具体设计规范吗?

相关推荐
程序员Ctrl喵19 小时前
异步编程:Event Loop 与 Isolate 的深层博弈
开发语言·flutter
前端不太难20 小时前
Flutter 如何设计可长期维护的模块边界?
flutter
小蜜蜂嗡嗡21 小时前
flutter列表中实现置顶动画
flutter
始持1 天前
第十二讲 风格与主题统一
前端·flutter
始持1 天前
第十一讲 界面导航与路由管理
flutter·vibecoding
始持1 天前
第十三讲 异步操作与异步构建
前端·flutter
新镜1 天前
【Flutter】 视频视频源横向、竖向问题
flutter
黄林晴1 天前
Compose Multiplatform 1.10 发布:统一 Preview、Navigation 3、Hot Reload 三箭齐发
android·flutter
Swift社区1 天前
Flutter 应该按功能拆,还是按技术层拆?
flutter
肠胃炎1 天前
树形选择器组件封装
前端·flutter