【Flutter工具】fmaker:自動生成倍率切圖/自動更換App圖示

遠在遠方的遠發表於2019-05-16
FlutterAPP

在《淺談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 -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更好哦。
倉庫地址:github.com/mjl0602/flu…

#未經作者授權，本文禁止轉載

相關文章