使用flutter寫的電影播放軟體：github.com/Mockingbird…
開源不易，感興趣的小夥伴給個star吧。
多色圖示
flutter中自定義了很多圖示，我一般都會在這個網站找flutter中的圖示：www.fluttericon.com/
這種圖示只支援純色，如果你不會設計而且還需要多色圖示，那麼就可以使用阿里巴巴的圖示庫：www.iconfont.cn/
在flutter中使用iconfont
下面以我專案中使用iconfont的多色圖示進行講解，主要用了githut一個開源專案：github.com/iconfont-cl…，可以閱讀這個開源專案的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
複製程式碼以上內容均來自github.com/iconfont-cl…
效果展示
更多效果歡迎到github.com/Mockingbird…下載軟體的realease版本檢視。