Flutter 使用iconfont自定义图标
2019-07-07 本文已影响5人
悟C
flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中修改配置信息开启图标支持，在没有开启uses-material-design配置的时候，图片都以问号展示。添加如下配置开始material图片支持。
flutter:
uses-material-design: true
image.png
但很多时候我们需要使用自定义图标，下面讲解一下如何在flutter中使用阿里的iconfont图标。
1. 打开iconnfont，随便选择一组图标
image.png
2.进入详情把这组图标加入购物车，下载代码
image.png
3. 解压下载的代码压缩包，我们可以看到一个iconfont.ttf
image.png
4. 在项目根目录下创建一个fonts，并且把这个图标字体文件放入
image.png
5. 在pubspec.yaml中添加fonts配置如下:
image.png
6. 使用iconfont_builder生成一个iconfont.dart的图标映射文件
首先你要确保你的电脑有dart环境，如果没有请安装（mac安装dart）
brew install dart
有了dart，现在安装需要的iconfont_builder
pub global activate iconfont_builder
有了iconfont_builder，我们就可以编译iconfont.dart
iconfont_builder --from ./fonts --to ./lib/Iconfont.dart
得到的iconfont.dart文件如下:
image.png
7. 使用生成好的iconfont.dart，这里是在main.dart中载入
image.png
下面使用Iconfont，生成一个图标
image.png
到这里我们已经成功的使用了自定义的图标了
image.png
