Flutter 125: 圖解自傳 ACE_ICON.ttf 圖示庫

    小菜在學習過程中通常會需要大量的小圖示，而多數的 Icon 都是經過設計同學最佳化過的，而如何採用類似系統 Icons 方式，此時可以透過自傳類似字型庫的 ttf 圖示庫的方式來完成；

ACE_ICON

    小菜推薦兩個網站可以用來生成圖示庫；

• []
• []

1. 生成 ACE_ICON.ttf 圖示庫

    小菜以 [] 為例來生成圖示庫；在這個圖示庫中有很多成套的圖示，在這裡可以選中需要的圖示，也可以將本地生成的 .svg 檔案拖拽進庫中；



    其中設定完圖示庫名稱後，透過工具選擇下載不同的檔案，包括 ttf 圖示庫、config 配置檔案以及 mapping 對映檔案；

2. 整合 ttf 圖示庫

• 將 ACE_ICON.ttf 庫檔案新增到 project 資原始檔中；
  
• 在 pubspec.yaml 檔案中宣告 ACE_ICON.tt 檔案庫；宣告方式與字型庫等一致，注意 family 與 font 名稱一致；在此可以宣告引入多個資源庫檔案；之後 pub get 即可；

fonts:
  - family: DancingScript
    fonts:
      - asset: assets/DancingScript-Regular.ttf
  - family: ACE_ICON
    fonts:
      - asset: images/ACE_ICON.ttf

• 將 mapping 檔案新增到 project 中，用於對映 ACE_ICON 圖示庫中各 Icons 檔案；

class ACE_ICON {
  ACE_ICON._();

  static const _kFontFam = 'ACE_ICON';
  static const String _kFontPkg = null;

  static const IconData emo_happy = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_wink = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_unhappy = IconData(0xe802, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_sleep = IconData(0xe803, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_thumbsup = IconData(0xe804, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_devil = IconData(0xe805, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_surprised = IconData(0xe806, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_tongue = IconData(0xe807, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_coffee = IconData(0xe808, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_sunglasses = IconData(0xe809, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_displeased = IconData(0xe80a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_beer = IconData(0xe80b, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_grin = IconData(0xe80c, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_angry = IconData(0xe80d, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_saint = IconData(0xe80e, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_cry = IconData(0xe80f, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_shoot = IconData(0xe810, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_squint = IconData(0xe811, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_laugh = IconData(0xe812, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData emo_wink2 = IconData(0xe813, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData book_story = IconData(0xe814, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData book_type = IconData(0xe815, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData book_user = IconData(0xe816, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData crown = IconData(0xe844, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData crown_plus = IconData(0xe845, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData crown_minus = IconData(0xe846, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

3. 圖示庫 IconData

    整合之後，使用方式與預設的 Icon 一致，直接獲取 IconData 即可，對於 Icon 的顏色尺寸等其他繪製也不會有影響；

List aceIconData = [
  ACE_ICON.book_story, ACE_ICON.book_type, ACE_ICON.book_user, ACE_ICON.crown,
  ACE_ICON.crown_minus, ACE_ICON.crown_plus, ACE_ICON.emo_angry, ACE_ICON.emo_beer,
  ACE_ICON.emo_coffee, ACE_ICON.emo_cry, ACE_ICON.emo_devil, ACE_ICON.emo_displeased,
  ACE_ICON.emo_grin, ACE_ICON.emo_happy, ACE_ICON.emo_laugh, ACE_ICON.emo_saint,
  ACE_ICON.emo_shoot, ACE_ICON.emo_sleep, ACE_ICON.emo_squint, ACE_ICON.emo_sunglasses,
  ACE_ICON.emo_surprised, ACE_ICON.emo_thumbsup, ACE_ICON.emo_tongue, 
  ACE_ICON.emo_unhappy, ACE_ICON.emo_wink, ACE_ICON.emo_wink2
];

return SliverPadding(
    padding: const EdgeInsets.all(8.0),
    sliver: SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 6, mainAxisSpacing: 8.0, crossAxisSpacing: 8.0, childAspectRatio: 1.0),
        delegate: SliverChildBuilderDelegate(
            (context, index) => Container(
                decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2), borderRadius: BorderRadius.circular(3.0)),
                child: Center(child: Icon(dataList[index], color: Colors.blue.withOpacity(0.6)))),
            childCount: dataList.length)));

4. 異常注意

    小菜在測試過程中，會顯示如下圖所示，Icon 資源展示不出來，其原因是小菜在 pubspec.yaml 檔案宣告時換行空格導致的，注意在引入所有資源庫檔案時，都應嚴格遵守 pubspec.yaml 宣告格式；

Flutter 版本分支切換

    Flutter 一直在穩定快速的更新迭代，而為了專案的穩定性，以及一些三方外掛的應用，我們可能不會直接升級到最新版本，此時就需要切換分支，回退固定版本；小菜簡單整理一下常用的幾個命令列；

1. flutter channel

    flutter channel 用於檢視渠道，官方分為 stable、beta、dev、master 四種，小菜推薦是用 stable 穩定版；此時，小菜建議在操作命令列指令時先進入 flutter 目錄中；

2. flutter channel X

    在獲取官方的各個分支之後，透過 flutter channel stable 用於切換到 stable 或其他分支；

3. git tag

    git tag 用於檢視 Flutter 各版本號；

4. git checkout (version)

    git checkout 1.17.4 用於切換固定 Flutter 版本分支；

5. git reset --hard (version)

    git reset --hard 1.17.4 用於指向對應版本分支；

6. flutter version (version)

    flutter version1.17.4 用於升級或回退到指定 Flutter 版本分支；

7. flutter --version

    flutter --version 用於檢視當前使用的版本，可以透過 –version 進行版本更新或回退後驗證；

    [ACE_ICON.ttf 案例原始碼] github.com/ACE-YANGCE/FlutterApp/blob/master/lib/page/ace_icon_page.dart)

    小菜此次僅是對於日常資源庫和命令列的簡單應用，熟能生巧，僅限於日常積累；如有錯誤，請多多指導！

來源： 阿策小和尚