flutter默认包含了一套Material Design的字体图标,在pubspec.yaml文件中修改配置信息开启图标支持,在没有开启uses-material-design
配置的时候,图片都以问号展示。添加如下配置开始material图片支持。
flutter:
uses-material-design: true
但很多时候我们需要使用自定义图标,下面讲解一下如何在flutter中使用阿里的iconfont图标。
1. 打开iconnfont,随便选择一组图标
2.进入详情把这组图标加入购物车,下载代码
3. 解压下载的代码压缩包,我们可以看到一个iconfont.ttf
4. 在项目根目录下创建一个fonts,并且把这个图标字体文件放入
5. 在pubspec.yaml中添加fonts配置如下:
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
文件如下:
7. 使用生成好的iconfont.dart
,这里是在main.dart中载入
下面使用Iconfont,生成一个图标
到这里我们已经成功的使用了自定义的图标了