在Flutter中使用自定義Icon

1. 前言

Flutter做爲時下最流行的技術之一，憑藉其出色的性能以及抹平多端的差別優點，早已引發大批技術愛好者的關注，甚至一些閒魚，美團，騰訊等大公司均已投入生產使用。雖然目前其生態尚未徹底成熟，但身靠背後的Google加持，其發展速度已經足夠驚人，能夠預見未來對Flutter開發人員的需求也會隨之增加。

不管是爲了技術嚐鮮仍是未來的潮流趨勢，都9102年了，做爲一個前端開發者，彷佛沒有理由不去嘗試它。正是帶着這樣的心理，筆者也開始學習Flutter，同時建了一個用於練習的倉庫，後續全部代碼都會託管在上面，歡迎star，一塊兒學習。這是我寫的Flutter系列文章：

• 用Flutter構建漂亮的UI界面 - 基礎組件篇
• Flutter滾動型容器組件 - ListView篇
• Flutter網格型佈局 - GridView篇
• 在Flutter中使用自定義Icon

今天要分享的內容其實很是簡單，咱們都知道Flutter內置了一套Material Design風格的Icon圖標，但對於一個成熟的App而言，一般狀況下仍是遠遠不夠的。爲此，咱們須要在項目中引入自定義的Icon圖標。

本文就將以Ant Design圖標庫爲例，介紹如何在Flutter中引入自定義圖標。

2. 準備工做：字體文件

正所謂「巧婦難爲無米之炊」，要想引入自定義圖標，首先咱們得準備好圖標字體文件（.ttf後綴）。對於大公司而言，找視覺同窗切就能夠了。但若是是本身作的業餘項目或者沒有資源的時候，咱們能夠上阿里巴巴矢量圖標庫pick本身心儀的圖標。

這裏就以Ant Design官方圖標庫爲例（一共有600個圖標），經過如下操做，咱們將圖標字體文件加入到項目中：

添加購物車 --> 點擊購物車 --> 下載代碼 --> 解壓 --> 拷貝至項目（可重命名）

3. 聲明自定義字體

僅僅將字體文件複製到項目中還不夠，咱們須要經過聲明的方式來告訴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.

註釋就是讓咱們在該段文字下方添加自定義字體的聲明，結合其註釋掉的例子和當前的項目目錄，咱們能夠這樣配置：

項目工程目錄結構
.
├── 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
複製代碼

注意： 配置完以後，必定要執行flutter packages get命令以及rebuild項目，不然字體文件沒法使用。

4. 編寫自定義的IconData

其實到目前爲止，咱們已經可使用剛剛下載的圖標了，就像下面代碼這樣：

Icon(
  IconData(0xe77d, fontFamily: 'AntdIcons'),
  size: 20,
  color: Colors.black
)
複製代碼

其中fontFamily的值'AntdIcons'就是咱們剛纔聲明的新字體，可是代碼中的0xe77d數值是哪來的呢？再次打開以前下載解壓以後的文件夾，其中有一個demo_index.html文件，在瀏覽器中打開它咱們能夠看到下面的畫面：

在Unicode這個Tab下，咱們能夠看到它貼心地給出了全部圖標的Type和Unicode碼對照關係。因此理論上來講，咱們想用哪一個圖標，只要copy其Unicode碼到代碼中就能夠了。

不過，這種作法顯然不是很友好。首先，咱們每次使用Icon以前都要從這張關係表中查找；其次，你肯定下次代碼中看到這串數字是對應什麼圖標嗎？因此，咱們須要更優雅的方法來管理自定義圖標。

其實作法也簡單，咱們能夠建立一個自定義圖標的類：

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：輸出結果中可能因爲圖標做者本身命名不規範而致使個別的小錯誤，手動修改便可，完整文件能夠看這裏。

接下來，就是愉快玩耍的時候啦~~~

5. 總結

本文經過一個實際的Ant Design圖標例子，詳細地介紹瞭如何在Flutter中引入自定義圖標，但願能夠幫助到你哦~

本文全部代碼託管在這兒，也能夠關注個人Blog，歡迎一塊兒學習~