Flutter中添加Iconfont矢量图

flutter中使用https://www.iconfont.cn/中的图标

1.新建项目,添加一些图标到项目中

Flutter中添加Iconfont矢量图_第1张图片

 然后点击下载到本地,找到 iconfont.ttf文件

Flutter中添加Iconfont矢量图_第2张图片

 2.打开flutter项目,将字体导入到文件夹中,没有文件夹的自己建

Flutter中添加Iconfont矢量图_第3张图片

3.找到pubspec.yaml文件,添加引用路径

Flutter中添加Iconfont矢量图_第4张图片

这里需要注意右边第一个fonts左边的空格,如果不对会引用不到,很坑爹,family是自定义的名字

 Flutter中添加Iconfont矢量图_第5张图片

用IconData引用该字体图片

 把图一中的&#换成0就是IconData的codePoint

这里Constants.IconFontFamily 等价于pubspec.yaml中的appIconFonts,是一个字符串 ,可替换成'appIconFonts'

4.运行项目展示

Flutter中添加Iconfont矢量图_第6张图片

你可能感兴趣的:(Flutter)