在flutter使用多色圖標，以iconfont爲例

使用flutter寫的電影播放軟件：https://github.com/Mockingbird1234/skapp

開源不易，感興趣的小夥伴給個star吧。

多色圖標

flutter中自定義了不少圖標，我通常都會在這個網站找flutter中的圖標：https://www.fluttericon.com/

這種圖標只支持純色，若是你不會設計並且還須要多色圖標，那麼就可使用阿里巴巴的圖標庫：https://www.iconfont.cn/

在flutter中使用iconfont

下面以我項目中使用iconfont的多色圖標進行講解，主要用了githut一個開源項目：https://github.com/iconfont-cli/flutter-iconfont-cli，能夠閱讀這個開源項目的readme文件進行一步步搭建使用。

1.在項目文件pubspec.yml中加入flutter插件 flutter_svg

{
  ...

  dependencies:
    # 版本號請以官方庫的爲準：https://github.com/dnfield/flutter_svg/tags
    flutter_svg: ^0.14.1
  ...
}

注意：這裏的flutter_svg最好使用0.17.3版本，經測試這個版本不會出現什麼問題，其餘版本可能會有報錯。

而後執行flutter插件安裝操做

flutter packages get

接着安裝全局插件（基於nodeJs）

npm install flutter-iconfont-cli -g

2.生成配置文件

npx iconfont-init

此時項目根目錄會生成一個iconfont.json的文件，內容以下：

{
    "symbol_url": "請參考README.md，複製官網提供的JS連接",
    "save_dir": "./lib/iconfont",
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "summary_component_name": "IconFont"
}

配置參數說明：

symbol_url:請直接複製iconfont官網提供的項目連接。請務必看清是.js後綴而不是.css後綴。若是你如今尚未建立iconfont的倉庫，那麼能夠填入這個連接去測試：http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js

save_dir:根據iconfont圖標生成的組件存放的位置。每次生成組件以前，該文件夾都會被清空。

trim_icon_prefix:若是你的圖標有通用的前綴，而你在使用的時候又不想重複去寫，那麼能夠經過這種配置這個選項把前綴統一去掉。

default_icon_size:咱們將爲每一個生成的圖標組件加入默認的字體大小，固然，你也能夠經過傳入props的方式改變這個size值。

summary_component_name:就是彙總組件的名稱，默認名稱爲IconFont，您也能夠改爲Icon或者您喜歡的名字。記住，它是一個類名，您必須遵照Dart中關於類名的語法規則，請儘可能以大寫字母開頭。

3.開始生成React標準組件

npx iconfont-flutter

生成後查看您設置的保存目錄中是否含有全部的圖標

4.使用

圖標尺寸

根據配置default_icon_size，每一個圖標都會有一個默認的尺寸，你能夠隨時覆蓋。

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return IconFont(IconNames.alipay, size: 100);
    }
}

圖標單色

單色圖標，若是不指定顏色值，圖標將渲染本來的顏色。若是你想設置爲其餘的顏色，那麼設置一個你想要的顏色便可。

注意：若是你在props傳入的color是字符串而不是數組，那麼即便本來是多色彩的圖標，也會變成單色圖標。

IconFont(IconNames.alipay, color: 'red');

圖標多色彩

多色彩的圖標，若是不指定顏色值，圖標將渲染本來的多色彩。若是你想設置爲其餘的顏色，那麼設置一組你想要的顏色便可

IconFont(IconNames.alipay, colors: ['green', 'orange']);

顏色組的數量以及排序，須要根據當前圖標的信息來肯定。您須要進入圖標組件中查看並得出結論。

更新圖標

當您在iconfont.cn中的圖標有變動時，只需更改配置symbol_url，而後再次執行Step 3便可生成最新的圖標組件

# 修改 symbol_url 配置後執行：
npx iconfont-flutter

以上內容均來自https://github.com/iconfont-cli/flutter-iconfont-cli

效果展現

更多效果歡迎到https://github.com/Mockingbird1234/skapp下載軟件的realease版本查看。