【Flutter工具】fmaker:自动生成倍率切图/自动更换App图标

在《浅谈Flutter的优缺点》文章中，我指出了Flutter存在切图困难，资源管理困难的缺陷，因此我使用node.js编写了一个小工具，能够帮您快速生成低倍率图片，并为iOS与安卓生成各自平台的图标。

提早全局安装

• flutter
• node.js环境
• npm包管理工具

fmaker功能

fmaker是一个flutter辅助图片处理工具，也能够用来给iOS或Android项目生成图标

按倍率生成图片

fmaker能够自动识别项目下/assets/fmaker中的多倍图，将多倍图按flutter格式递归转换为2.0x，3.0x，4.0x等文件夹，再将压缩后的低倍图保存到assets中，保证flutter能够自动识别低倍率的图片。例如，在文件夹下放置example@3x.png，会生成三倍图，两倍图和一倍图。

为何要这样作？

由于高分辨率的图片被缩小时，会产生没必要要的锐化效果，偶尔会产生卡顿；小图被放大时，会变得很模糊，flutter提供一个功能，自动显示正确分辨率的图片。
可是使用这个功能困难重重，若是你的设计使用sketch切图，只能切出image.png,image@2x.png,image@3x.png这种图，可是flutter须要的图片目录格式是image.png,2.0x/image.png,3.0x/image.png，这种格式使用sketch是很难一次导出的（须要每一次都更改导出名称），很很差用。

生成App图标

若是/assets/fmaker文件夹下有名为ios_icon.png和android_icon.png的文件，那么fmaker会自动识别这两个文件，直接将图标生成到项目中，不须要额外的复制粘贴。

注意：iOS的图标不可含有alpha通道，Android的图标能够包含。共同的一点是，图标必须是正方形， fmaker会帮你检查icon尺寸，并在log中输出错误。

安装

git clone https://github.com/mjl0602/flutter-assets-maker.git
cd flutter-assets-maker
npm install
npm install -g
fmaker

若是看到，“没有对应指令，fmaker已安装”的log，就已经安装成功。

使用

先假定你的项目名叫yourFlutterProject。

须要准备icon文件，ios_icon.png和ios_android.png，放在yourFlutterProject/assets/fmaker下，其余的多倍图也能够放进去，例如example@3x.png。

Tips:若是找不到合规的文件又想试一试，使用fmaker init来使用个人测试图片。

cd yourFlutterProject
fmaker init #若是暂时找不到图，就用个人图测试
fmaker build

而后安卓与iOS的App图标都已经被替换，你能够启动项目来查看。

注意

• 工具理论上只支持png。
• 工具会产生两个同样的图，一个是最高倍图，一个是源图，必定程度上增长了项目大小。
• 建议不要引用fmaker文件夹中的源图，由于他不能被自动切换倍率。
• fmaker的重复图片不会增长产物大小，只要你不引入源图。

示例

//TODO
有空就整个例子

若是有bug，欢迎提issue，pr更好哦。
仓库地址: https://github.com/mjl0602/fl...

未经做者受权，本文禁止转载