在 Flutter 包中使用自定义图标字体显示问号而不是自定义图标

Posted

技术标签:

【中文标题】在 Flutter 包中使用自定义图标字体显示问号而不是自定义图标【英文标题】:Using a custom icon font in a Flutter package displays Question marks instead of custom icons 【发布时间】:2021-10-31 18:36:07 【问题描述】:

我有一个由许多不同的 Dart 和 Flutter 包组成的应用程序。 事实证明,这很有用,因为我能够将字体、颜色和小部件等内容移动到独立的样式指南包中,然后我们可以在所有其他应用程序中使用它。

在包works slightly differently in Flutter 中使用自定义字体,因为我们需要将assets 目录添加为lib 的子目录而不是兄弟目录:

...然后像这样在pubspec.yaml注册这些资产:

assets:
 - packages/receipt_widget/assets/fonts/my_font.ttf
 // other asset declarations

这对于自定义字体和图标(png、jpg 等)完全可以正常工作。我的问题是同样的方法不适用于自定义图标字体

步骤:

使用IcoMoon 或Flutter Icon 生成自定义图标字体 如上所示将生成的字体放入assets/fonts目录 将生成的dart文件放到lib文件夹中 在代码中引用自定义图标并将其放入Icon 小部件中,如下所示:
Icon(MyFontIcon.ic_heart);

为了安全起见,我运行 flutter clean 并在部署干净的构建之前从设备/模拟器中卸载应用程序。 然后我会留下一个问号而不是引用的图标。

注意。当直接在 Flutter 应用程序中而不是在包中使用时,相同的图标可以正常工作。

【问题讨论】:

【参考方案1】:

要使用自定义包中的 Flutter Icon 字体,您可以按照以下步骤操作: (我已经重复了您的一些步骤,以供其他会发现此问题的人使用)

创建一个颤动的图标字体

你可以使用颤振图标https://www.fluttericon.com

将文件放入你的包中

确保将.ttf 文件复制到/lib 文件夹中。 不仅仅是资产,就像您在根项目中所做的那样。

示例路径:

/packages/my_awesome_fontpackage/lib/assets/MyIconFont.ttf

(见https://zubairehman.medium.com/how-to-use-custom-fonts-images-in-flutter-package-c2d9d4bfd47a)

将字体添加到您的项目中

现在打开包的pubspec.yaml 文件并将字体添加为资产带有包路径

flutter:
  fonts:
  - family:  MyIconFont
    fonts:
      - asset: packages/my_awesome_fontpackage/assets/MyIconFont.ttf

(您可能必须重新启动您的应用程序并完全绑定才能正确加载字体,并且可能运行flutter clean 以确保)

现在将包声明添加到字体 dart 文件中

进入my_icon_font.dart 文件并将其中的常量_kFontPkg 更改为您的包名。


class MyIconFont 
  MyIconFont._();

  static const _kFontFam = 'MyIconFont';
  static const String? _kFontPkg = 'my_awesome_fontpackage';

  static const IconData bell = ...
  ....

【讨论】:

以上是关于在 Flutter 包中使用自定义图标字体显示问号而不是自定义图标的主要内容,如果未能解决你的问题,请参考以下文章

flutter 使用字体图标

FontAwesome 图标显示为问号

Flutter 多自定义图标未显示在地图视图上

R语言使用treemap包中的treemap函数可视化treemap图:treemap将分层数据显示为一组嵌套矩形自定义设置treemap图的调色板自定义设置treemap标题字体的大小

Flutter 图标显示为矩形

Flutter Widget - Icon图标(使用第三方图标库)