【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...

未經做者受權，本文禁止轉載