玖叶教程网

前端编程开发入门

Flutter如何快速做好App的图标适配

?接触Flutter一年多的时间,作为一名之前只做H5前端开发的老司机,对类原生App开发还是挺有兴趣的,一点小小的发现和提升都会惊喜,希望能和大家一起学习进步,提升自己的能力,做出更好更优秀的APP应用。今天跟大家一起来学习如何做好Flutter App应用图标的适配。

Android 8.0 后App图标开始变成圆形的图标了

如果不进行图标适配的话,那么显示的图标将异常丑

那么怎么用一套图标,既可以兼容安卓8之前的版本矩形/圆角矩形图标,也可以兼容8之后的圆形图标版本呢?

在此之前我们得先了解一项Android 8.0以后应用图标上的区别(老司机可以无视)。

Android 8.0(API 级别 26)引入了自适应启动器图标,可以在不同设备模型中显示各种形状。先来看下官方酷炫动态图:

Android 8.0 以上可以通过定义 2 层来控制自适应启动器图标的外观,包括背景层和前景层,就如我们在做PS多图层叠加一个道理。您必须提供图标的背景图层(也可以是单独的一个Hex色值),前景层的图标轮廓周围不能有蒙版或背景阴影。这里前后图层还需注意以下两点:

  1. 图层大小以 324*324 (单位px)为佳;
  2. 前景层即图标层的图标主体部分应居中且不应超过图层大小的66.6%,以324宽高为例,主体图标部分大小不应超过 215*215 大小,否则图标的主体会被遮罩部分挡住。

好了到此处我们的Flutter图标适配就完成了90%了。啥?我们不是什么都还没做吗?对于剩下的步骤工具一个命令就能能完成的事,那不叫事,嘿嘿。

首先准备好我们要用的图层和图标,如下:

万事具备只欠东风,要快速实现自适应图标,还得请出我们的主角,那就是Flutter的插件:flutter_launcher_icons

flutter_launcher_icons 提供了adaptive_icon_background 和 adaptive_icon_foreground 指定这两个属性,即可实现安卓8以上版本的图标自适应工作。安装好依赖之后需要做简单的配置即可,如下

#App 应用适配图标配置

flutter_icons:
  android: "ic_launcher"
  ios: true
  image_path: "assets/icon/ic_launcher.png"
  # only available for Android 8.0 devices and above
  adaptive_icon_background: "assets/icon/ic_launcher_background.png"
  # only available for Android 8.0 devices and above
  adaptive_icon_foreground: "assets/icon/ic_launcher_foreground.png"

具体详细的配置参数可以去官方插件地址了解,在这里就不详细介绍了.

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言