关于flutter:flutter-最简单的应用程序图标制作方法

48次阅读

共计 2653 个字符,预计需要花费 7 分钟才能阅读完成。

原文

https://medium.com/@bharadwaj…

参考

  • https://pub.flutter-io.cn/pac…

注释

让咱们抵赖这一点ーー管理应用程序图标是一项反复的工作。他们必须生成的多分辨率和手动搁置在几个文件夹,这是一个世俗的工作采取。你可能须要做一些小的扭转或者批改,当初你必须反复整个替换图标的过程。

不仅如此,依据咱们抉择的平台或操作系统的版本,还利用了不同的规定。所以把这些都记在心里,这个过程最好是自动化,而不是手动实现。咱们将在这里应用这个名为“flutter_launcher_icons”的 flutter 包来主动生成所有须要的分辨率。

Flutter Launcher Icons:

一个命令行工具,简化了更新应用程序启动图标的工作。齐全灵便,容许你抉择你想要更新启动器图标的平台,如果你想要的话,抉择保留你的旧启动器图标,以防你想在将来的某个时候返回。

先决条件

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

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

安卓产品图标关键字

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 和自适应图标创立三种不同的格调。

预期外观

Android and iOS (no transparency) 安卓和 iOS (没有透明度)

Adaptive Icons for Android 8.0 and above 8.0 及以上版本的自适应图标

实施方案:

咱们将应用一个名为 flutter_launcher_icons 的包

当初咱们须要别离在你的代码中实现它:

  • 第一步: 增加依赖项。

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

dev_dependencies:
  flutter_launcher_icons: any
  • 第二步: 配置属性
flutter_icons:
  ios: true
  android: true
  image_path_ios: "assets/launcher/icon.png"
  image_path_android: "assets/launcher/icon.png"
  adaptive_icon_background: "assets/launcher/background.png"
  adaptive_icon_foreground: "assets/launcher/foreground.png"

图像在你的 assets/launcher/

  • 第三步: 运行包

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

flutter pub get
flutter pub run flutter_launcher_icons:main
  • 第四步: 跑步

如果一切顺利,资产曾经产生。当初,您曾经筹备好构建应用程序并运行它了。祝贺你

属性:

目前,它只能用于为 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 : 将用于自适应图标的前景图标的图像资产

Thank you\!

谢谢


© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

正文完
 0