flutter应用程序图标制作简单方法

  • 发表于
  • flutter

其实之前已经有写过一篇文章《Flutter应用图标自适应方案:标准规范自动圆角不变形》,结合着看也行。

让我们承认这一点ーー管理应用程序图标是一项重复的任务。他们必须生成的多分辨率和手动放置在几个文件夹,这是一个世俗的任务采取。你可能需要做一些小的改变或者修改,现在你必须重复整个替换图标的过程。

不仅如此,根据我们选择的平台或操作系统的版本,还应用了不同的规则。所以把这些都记在心里,这个过程最好是自动化,而不是手动完成。我们将在这里使用这个名为“ flutter_launcher_icons”的 flutter 包来自动生成所有需要的分辨率。

Flutter Launcher Icons:

一个命令行工具,简化了更新应用程序启动图标的任务。完全灵活,允许你选择你想要更新启动器图标的平台,如果你想要的话,选择保留你的旧启动器图标,以防你想在未来的某个时候返回。

先决条件

在任何情况下,当从图形编辑器导出时,应该是:

  • Format: 32-bit 格式: 32 位PNG 巴布亚新几内亚
  • Icon size 图标大小must be up to 1024x1024 pixels 必须达到 1024x1024 像素
  • 确保在 40 像素处可见(这是最小的图标)(Apple Requirement) (苹果需求)
  • 最大尺寸1024KB (Android Requirement) 1024KB (Android 版本要求)
  • 图标必须用no transparency 没有透明度
  • 形状必须是正方形no rounded corners 没有圆角
  • 需要一个自适应的 android 图标background 背景and 及foreground 前景to be separated 分开
flutter应用程序图标制作简单方法

安卓产品图标关键字

The intended look might be different from the guidelines provided by the platforms. So we’ll be creating 3 different flavors for android, iOS, adaptive icons.

预期的外观可能与平台提供的指导方针不同。因此,我们将为 android、 iOS 和自适应图标创建三种不同的风格。

flutter应用程序图标制作简单方法
预期外观
flutter应用程序图标制作简单方法
Android and iOS (no transparency) 安卓和 iOS (没有透明度)
flutter应用程序图标制作简单方法
Adaptive Icons for Android 8.0 and above 8.0 及以上版本的自适应图标

实施方案:

我们将使用一个名为 flutter_launcher_icons 的包

现在我们需要分别在你的代码中实现它:

  • 第一步: 添加依赖项。

将 dependency 添加到位于 Flutter 项目根目录中的 pubspec.yaml 文件:

  • 第二步: 配置属性
flutter应用程序图标制作简单方法
图像在你的 assets/launcher/
  • 第三步: 运行包

设置完配置后,剩下要做的就是运行包。

  • 第四步: 跑步

如果一切顺利,资产已经产生。现在,您已经准备好构建应用程序并运行它了。恭喜你

属性:

目前,它只能用于为 android/ios 分配图标

  • image_path 图像路径: : 图标图像文件的位置,你想用它作为应用程序启动图标
  • image_path_android 图片/path/android: : 特定于 Android 平台的图标图像文件的位置
  • image_path_ios 图片/path/ios: : 特定于 iOS 平台的图标图像文件位置

接下来的两个属性只在生成 Android 启动器图标时使用

  • adaptive_icon_background 背景: You can pass in a solid color (E.g. “#ffffff”) or image asset (E.g. “assets/images/christmas-background.png”) which will be used to fill out the background of the adaptive icon.
  • adaptive_icon_foreground 自适应图标前景: The image asset which will be used for the icon foreground of the adaptive icon : 将用于自适应图标的前景图标的图像资产

文章来源:https://medium.com/@bharadwaj.palakurthy/the-easiest-way-to-make-app-icons-in-flutter-9fe1bc9dd646