#Flutter# iconfont.ttf转成iconfont.dart

鸿蒙小兵

已于 2023-10-26 14:56:44 修改

阅读量245

点赞数 1

CC 4.0 BY-SA版权

文章标签： flutter 前端

于 2023-10-26 14:55:26 首次发布

本文链接：https://blog.csdn.net/m0_58411371/article/details/134055293

本文讲述了如何在Flutter项目中解决因引入iconfont.ttf导致的打包错误，介绍了将.ttf字体文件转换为dart文件的方法，包括安装dart环境、使用iconfont_builder工具、添加到项目资产和引用iconfont的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为啥要将iconfont.ttf转成iconfont.dart？

1、flutter工程中引入了iconfont.ttf不存在的icon引发

打包时报错 aot_android_asset_bundle failed

2、防止打包报错Target aot_android_asset_bundle failed

3、直观了解iconfont.ttf里面有哪些icon，并方便调用

如何将iconfont.ttf转成iconfont.dart？

1、确保电脑有 dart 环境，如果没有请执行安装 dart：

brew install dart

2、安装全局的iconfont_builder

// 两种安装方式 小编用了第二种才成功
1、pub global activate iconfont_builder
2、flutter pub global activate iconfont_builder

3、小编是从阿里矢量库下载的iconfont资源

4、解压iconfont压缩包

5、找到iconfont.tff和demo_index.html这两个文件（文件名可能不一样，只要是后缀是.ttf和.html即可）；将两个文件添加到项目中，这里小编添加到了assets/fonts下，然后在pubspec.yaml添加如下代码：

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

6、在flutter项目中在lib文件夹下创建fonts文件夹，cmd 中 cd到项目路径中，执行下面代码

//生成iconfont.dart文件
iconfont_builder --from ./assets/fonts --to ./lib/fonts/iconfont.dart

7、生成后的iconfont.dart文件部分代码

8、引用iconfont

const Icon(Iconfont.qizhi,color: Colors.white,size: 18)

结束语

到这里 iconfont.ttf转成iconfont.dart就结束了，将.ttf转成.dart文件后就再也不怕.ttf内容改变之后要大改工程内部代码引用了