Iconfont使用

场景

开发底部tab的时候，使用系统自带的“Icons”提供的图标，在切换tab的过程中，图标会有动画变色效果。尽管“Icons”提供了不少图标，但是还是满足不了部分需求。第一时间想到的是阿里矢量图标库，于是着手在项目中引入该库的图标。

使用步骤

进入 阿里矢量图标库

搜索相关图标，比如“首页”。然后选择心仪的图标，加入购物车。

搜索、选择、收藏图标

进入购物车，选择“下载代码”，得到一个zip格式的压缩包。

压缩包内容

打开压缩包，解压出“iconfont.ttf”放置到flutter工程目录中（目录位置可以随意放置，配置fonts的时候对应上就行）。

存放目录

配置工程目录中 pubspec.yaml 下的 fonts

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

代码中使用

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Material(
      child: Center(  child:  Icon(IconData(0xe656,fontFamily: 'iconfont')),
      ),
    );
  }

上面这段代码中的“0xe656”相当于图标的id，可在压缩包中的html文件中找到；“iconfont”是对应 pubspec.yaml中声明的“- family: iconfont”，且可以随意定义。