如何在 Flutter 中使用 IconFont ?

我的个人博客同步更新,阅读体验会好一点,欢迎访问。

简书:https://www.jianshu.com/u/762002465748

掘金:https://juejin.im/user/5a3127da5188251c11409f0a

个人博客:https://wuht.coding.me/

废话

距离上一次更新博客已经半年了,实在是有点忙,期间还换了了个工作,很多的事情,但是非常感谢有的网友还跟我联系,自己写的东西还有人觉得有价值,这感觉挺好的。

2018-06-09_190733.png

正文

2018年2月世界移动大会Google发布了 Flutter beat1,现在 Flutter 已经更新到v0.5.2 了,是时候学习一波了。主要是最近在搞 Weex 被坑的不行了。

Iconfont 的使用自己去看一下文档了,我就不说了。

目前在 Flutter 中使用图标的几种方式

内置图标

目前在 Flutter 使用图标的话,可以使用 Icons :

  icon: Icon( Icons.home)

内置图标还是挺多的,基本上还是够用的。

fontawesome

除了Icons,还有国外比较流行了 fontawesome 可以使用,已经有人做了个包了,依赖一下font_awesome_flutter这个包,使用也比较简单:

  icon: new Icon(FontAwesomeIcons.gamepad), 

使用图片

这个主要就是配置一下 pubspec.yaml里的assets,使用的话跟图片一样,缺点就是大小和颜色不太好控制,而且会增加项目的体积。

iconfont

国内用的多,但是还没有人做 Flutter 的package,所以只能自己搞一下了。

教程开始了

从iconfont网站上下载ttf文件

2018-06-09_184200.png

放到某个目录下,比如说 fonts 文件夹下:

project/
  lib/
    ...
  fonts/
    iconfont.ttf
  pubspec.yaml  

配置 pubspec.yaml 下的 fonts:

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

然后就可以使用了

Icon( IconData(0xe6bb, fontFamily: 'iconfont'),color: Colors.blue,size: 89.0)

0xe6bb 这个十六进制是从这里拿到的:

2018-06-09_185052.png

不同的十六进制代表不同的图标。

本来教程到这里就结束了,但在实际做的过程中我是有一个疑问的,就是为啥下面的代码不可以正常显示图标,而且 字符 x,会被转换成一个键盘的图标,这个问题之前在vue使用v-text设置iconfont图标就会出现,但是一直不知道为啥,希望有大佬能评论区解答一下。

Text("#0xe7b7;",style: TextStyle(fontFamily: 'iconfont'))// 可以正常换字体,但图标不行

欢迎打赏,关注,点赞。

推荐阅读更多精彩内容