Flutter自定义图标库_Flutter中借助阿里巴巴图标库自定义字体图标

本章节对应的视频教程：https://www.bilibili.com/video/BV15P411P7DN?p=23

Flutter官方有很多的图标库，但是有些没法满足我们的需求，这个时候我们就需要自定义图标库，Flutter中如何借助阿里巴巴图标库自定义字体图标呢？下面我们一起看看。

阿里巴巴图标库官网 iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。

假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：

Flutter+Getx仿小米实战视频教程： https://www.itying.com/goods-1176.html

1. 导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"：

fonts:
  - family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

也可以配置多个字体文件：

  fonts:
    - family: myIcon  #指定一个字体名
      fonts:
        - asset: fonts/iconfont.ttf
    - family: alipayIcon  #指定一个字体名
      fonts:
        - asset: fonts/iconfont2.ttf

2、 为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量：

class MyIcons{
  // book 图标
  static const IconData book = IconData(
      0xe614, 
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}

3、 使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple),
    Icon(MyIcons.wechat,color: Colors.green),
  ],
)