1. 前言
Flutter作為時下最流行的技術(shù)之一，憑借其出色的性能以及抹平多端的差異優(yōu)勢，早已引起大批技術(shù)愛好者的關(guān)注，甚至一些閑魚，美團，騰訊等大公司均已投入生產(chǎn)使用。雖然目前其生態(tài)還沒有完全成熟，但身靠背后的Google加持，其發(fā)展速度已經(jīng)足夠驚人，可以預(yù)見將來對Flutter開發(fā)人員的需求也會隨之增長。
無論是為了現(xiàn)在的技術(shù)嘗鮮還是將來的潮流趨勢，都9102年了，作為一個前端開發(fā)者，似乎沒有理由不去嘗試它。正是帶著這樣的心理，筆者也開始學(xué)習(xí)Flutter，同時建了一個用于練習(xí)的倉庫，后續(xù)所有代碼都會托管在上面，歡迎star，一起學(xué)習(xí)。這是我寫的Flutter系列文章：
- 用Flutter構(gòu)建漂亮的UI界面 - 基礎(chǔ)組件篇
- Flutter滾動型容器組件 - ListView篇
- Flutter網(wǎng)格型布局 - GridView篇
- 在Flutter中使用自定義Icon
今天要分享的內(nèi)容其實非常簡單，我們都知道Flutter內(nèi)置了一套Material Design風格的Icon圖標，但對于一個成熟的App而言，通常情況下還是遠遠不夠的。為此，我們需要在項目中引入自定義的Icon圖標。
本文就將以Ant Design圖標庫為例，介紹如何在Flutter中引入自定義圖標。
2. 準備工作：字體文件
正所謂“巧婦難為無米之炊”，要想引入自定義圖標，首先我們得準備好圖標字體文件（.ttf后綴）。對于大公司而言，找視覺同學(xué)切就可以了。但如果是自己做的業(yè)余項目或者沒有資源的時候，我們可以上阿里巴巴矢量圖標庫pick自己心儀的圖標。
這里就以Ant Design官方圖標庫為例（一共有600個圖標），通過以下操作，我們將圖標字體文件加入到項目中：
添加購物車 --> 點擊購物車 --> 下載代碼 --> 解壓 --> 拷貝至項目（可重命名）
3. 聲明自定義字體
僅僅將字體文件復(fù)制到項目中還不夠，我們需要通過聲明的方式來告訴Flutter有新字體可用。打開項目根目錄下的pubspec.yaml文件，找到fonts這一段：
To add custom fonts to your application, add a fonts section here, in this "flutter" section. Each entry in this list should have a "family" key with the font family name, and a "fonts" key with a list giving the asset and other descriptors for the font.
注釋就是讓我們在該段文字下方添加自定義字體的聲明，結(jié)合其注釋掉的例子和當前的項目目錄，我們可以這樣配置：
項目工程目錄結(jié)構(gòu)
.
├── README.md
├── android
│ └── app
├── assets
│ └── fonts
│ └── AntdIcons.ttf
├── flutter_training_app.iml
├── ios
│ └── Flutter
├── lib
│ └── main.dart
├── pubspec.lock
└── pubspec.yaml
字體聲明
fonts:
- family: AntdIcons
fonts:
- asset: assets/fonts/AntdIcons.ttf
注意： 配置完之后，一定要執(zhí)行flutter packages get命令以及rebuild項目，否則字體文件無法使用。
4. 編寫自定義的IconData
其實到目前為止，我們已經(jīng)可以使用剛剛下載的圖標了，就像下面代碼這樣：
Icon(
IconData(0xe77d, fontFamily: 'AntdIcons'),
size: 20,
color: Colors.black
)
其中fontFamily的值'AntdIcons'就是我們剛才聲明的新字體，但是代碼中的0xe77d數(shù)值是哪來的呢？再次打開之前下載解壓之后的文件夾，其中有一個demo_index.html文件，在瀏覽器中打開它我們可以看到下面的畫面：
在Unicode這個Tab下，我們可以看到它貼心地給出了所有圖標的Type和Unicode碼對照關(guān)系。所以理論上來說，我們想用哪個圖標，只要copy其Unicode碼到代碼中就可以了。
不過，這種做法顯然不是很友好。首先，我們每次使用Icon之前都要從這張關(guān)系表中查找；其次，你確定下次代碼中看到這串數(shù)字是對應(yīng)什么圖標嗎（更不用說其他人了）？所以，我們需要更優(yōu)雅的方法來管理自定義圖標。
其實做法也簡單，我們可以創(chuàng)建一個自定義圖標的類：
class AntdIcons {
static const IconData checkCircle = IconData(0xe77d, fontFamily: 'AntdIcons');
static const IconData CI = IconData(0xe77e, fontFamily: 'AntdIcons');
static const IconData Dollar = IconData(0xe77f, fontFamily: 'AntdIcons');
...
}
然后使用方法就變成了：
Icon(
AntdIcons.checkCircle,
size: 20,
color: Colors.black
)
以上代碼完全等同于前面直接使用Unicode碼的效果。不過要想用上所有的圖標，我們還得豐富AntdIcons這個類。為此，可以寫上一段小腳本，在demo_index.html瀏覽器窗口的控制臺中運行就能得到定義IconData的代碼：
function camelCase(str) {
return str.replace(/[ -]+(\w)/g, (match, char) => char.toUpperCase());
}
function makeCode({name, code}) {
return `static const IconData ${camelCase(name)} = IconData(0${code.substr(2, 5)}, fontFamily: 'antd-icons');\n`;
}
Array
.from(document.querySelectorAll('.unicode .dib'))
.map(element => {
return {
name: element.querySelector('.name').innerText,
code: element.querySelector('.code-name').innerText
};
})
.map(makeCode)
.join('\n');
PS：輸出結(jié)果中可能由于圖標作者自己命名不規(guī)范而導(dǎo)致個別的小錯誤，手動修改即可，完整文件可以看這里。
接下來，就是愉快玩耍的時候啦~~~
5. 總結(jié)
本文通過一個實際的Ant Design圖標例子，詳細地介紹了如何在Flutter中引入自定義圖標，希望可以幫助到你哦~
