如何在 Flutter Web 上启用自定义图标？

Posted 2023-02-23

技术标签:

【中文标题】如何在 Flutter Web 上启用自定义图标？【英文标题】：How to enable Custom Icons on Flutter Web? 【发布时间】：2022-01-03 01:51:54 【问题描述】：

我有在 ios 和 android 上运行良好的自定义图标。当我在 Web 上进行部署时，应用程序中应该出现我的图标的每个位置都会出现一个划掉的框。

控制台中出现的错误如下：

找不到一组 Noto 字体来显示所有缺失的字符。请为缺失的字符添加字体资源。

当我查看Flutter Design Fonts 上的文档时，我发现我已按照步骤操作。

我的自定义图标 (fishfarm.ttf) 位于 assets 文件夹中。在pubspec.yaml 我有以下内容：

  fonts:
   - family: FishFarm
     fonts:
      - asset: assets/fishfarm.ttf

我可以使用Icon(FishFarm.nombreicono)在IOS和Android中使用我的图标

如何在 Flutter Web 中使用自定义图标？

【问题讨论】：

【参考方案1】：

快速解决方法是使用html 渲染器构建您的网络应用程序。

构建

flutter build web --web-renderer html

或运行

flutter run -d chrome --web-renderer html

但它可能会在 PC 浏览器上表现不佳，因为 Flutter Web 在 PC 浏览器上使用 canvaskit 渲染器以获得更好的性能，而在移动浏览器上使用 html 渲染器。

See web renderers doc

【讨论】：

嗨@pradeep。您知道在不影响性能的情况下处理 PC 浏览器上的自定义图标的任何替代方法吗？

以上是关于如何在 Flutter Web 上启用自定义图标？的主要内容，如果未能解决你的问题，请参考以下文章