下載字體資源文件

下載網(wǎng)上ttf文件和對(duì)應(yīng)的css文件，這里以阿里巴巴圖標(biāo)庫(kù)使用為例。下載資源文件下載，解壓縮目錄結(jié)構(gòu)：

demo.css
demo_index.html
iconfont.css
iconfont.eot
iconfont.js
iconfont.svg
iconfont.ttf
iconfont.woff
iconfont.woff2 

將上面iconfont.css文件轉(zhuǎn)換成dart可使用類型

這里推薦一個(gè)工具：iconfont 轉(zhuǎn) Flutter IconData，將iconfont.css拖拽進(jìn)去生成一下文件內(nèi)容：

// iconfont.dart 文件內(nèi)容
library iconfont; // 新添加內(nèi)容，包名[1]

import 'package:flutter/widgets.dart';

class IconFont { 
    static const String _family = 'iconfont';
    IconFont._();
    static const IconData icon_message = IconData(0xe610, fontFamily: _family);
    static const IconData icon_message1 = IconData(0xe608, fontFamily: _family);
    static const IconData icon_qunliao = IconData(0xe614, fontFamily: _family);
    ...
}

建立iconfont目錄文件結(jié)構(gòu)

在項(xiàng)目中l(wèi)ib文件夾下新建iconfont文件夾

- iconfont
    - fonts
      - iconfont.ttf    // 將上述 iconfont.ttf 文件復(fù)制進(jìn)去
    - lib
      - iconfont.dart    // 新建文件，將上述中的 iconfont.dart 復(fù)制進(jìn)來(lái)
    - pubspec.yaml    // 新建文件

pubspec.yaml

name: iconfont  
description: The font for my application
version: 1.0.0

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

flutter:
  fonts:
    - family: Iconfont
      fonts:
        - asset: fonts/iconfont.ttf

引用和使用

• 引入： 修改【例如: wx_demo】項(xiàng)目中pubspec.yaml

...
dependencies:
  flutter:
    sdk: flutter
  ...
  iconfont:
      path: lib/iconfont/   # 在這里引入第三方icon庫(kù)
  ...
...

• 使用

import 'package:iconfont/iconfont.dart';

Icon icon = Icon(IconFont.icon_message2) // 注意：這里的`IconFont`要和`iconfont.dart`中類名一致。

結(jié)尾文件目錄參考

wx_demo目錄結(jié)構(gòu)

wx_demo/lib/iconfont目錄結(jié)構(gòu)

參考：https://segmentfault.com/a/1190000017978633
依賴未發(fā)布的 package