小技巧：Flutter如何引用自定義圖示

ITVENTI技術團隊發表於2020-06-21
Flutter

Flutter自帶了Material的圖示，但是還是不太適合中國的國情，比如微信、微博、QQ這些國內常用的圖示就沒有收錄，或者為了讓APP更有個性，我們希望換掉Material的風格，這個時候，自定義圖示就成了一個不大不小的問題，Flutter對於引用自定義的解決思路其實不太複雜，按照以下思路走就可以了：

  1. 把圖示打包成ttf檔案放在專案路徑下並且修改pubspec.yaml檔案，比如：
  fonts:
    - family:  MyIcons
      fonts:
       # 字型檔案所在的路徑+檔名
       - asset: assets/fonts/MyIcons.ttf    
複製程式碼
  1. 然後新增一個.dart檔案，我習慣按font family名字命名為my_icons.dart（注意檔名要符合dart的程式碼規範），程式碼內容如下：
import 'package:flutter/widgets.dart';

class MyIcons {
  CustomIcons._();

  static const _kFontFam = 'MyIcons';
  static const _kFontPkg = null;

  static const IconData weibo = IconData(0xf18a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData qq = IconData(0xf1d6, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData wechat = IconData(0xf1d7, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}
複製程式碼

上述程式碼有兩點需要特別注意：

  • _kFontFam這個私有變數要和pubspec.yaml的family的名稱一致，
  • IconData第一個引數是codePoint，記得要圖示在字型內的Unicode程式碼一致
  1. 設定好了就可以開始使用了，以下是一個例子：
  import './assets/my_icons.dart';

  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Custom Icon Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Login with  WeChat'),
          ),
          body: Center(
            child: Icon(MyIcons.wechat), //重點在這裡
          ),
        ),
      );
    }
  }
複製程式碼

...其實還有更省力的辦法

我說的不是Iconfont，它確實幫助我們解決了按專案管理圖示以及生成.ttf檔案的難題，但是對於Flutter，這還遠遠不夠，我說的是fluttericon.com這個網站，和Iconfont不一樣，這是一個不需要任何後端的網站，所以如果你覺得訪問國外網站速度太慢，你還可以從它的github上下載並部署到本地。Fluttericon既實現了從圖示集自動生成.ttf和.dart的工具鏈，又保留了Iconfont可對圖示集進行管理的功能，確實還是挺省力的：

新建我的圖示集：

  • 開啟網站，在Names中搜尋或點選圖示進行選擇，目前可以選擇的圖示集有 Material\Font Awesome 5\Entypo\Typicons\Iconic\Modern Pictograms\Meteocons\MFG Labs\Maki\Zocial\Brandico\Elusive\Linecons\Web Symbols\Linearicons Free\Octicons\RPG Awesome，如果沒有的話，也可以自行上傳SVG
  • 點完餐後點選Download下載壓縮包，解壓，找到字型檔案和.dart檔案，拷貝到你的Flutter專案路徑下，參考前述步驟1修改pubspec.yaml檔案，參考步驟3引用圖示；

修改我的圖示集

fluttericon是個純前端的網站，那麼我之前的圖示集怎麼找的回來呢，這就需要你好好保管好之前下載的壓縮包，重新上傳到網站就可以找回並修改你的圖示集了。

相關文章