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

发布于 1 年前 作者 phonegap100 418 次浏览 最后一次编辑是 1 年前 来自 分享

本章节对应的视频教程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),
  ],
)
回到顶部