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

Question

我有自定义图标，可以在 IOS 和 Android 上正常工作。当我在 Web 上部署时，应用程序中应显示图标的每个位置都会出现一个划掉的框。

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

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

当我检查Flutter Design Fonts的文档时，我发现我已经遵循了这些步骤。

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

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

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

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

Answer 1

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

建造

flutter build web --web-renderer html

或运行

flutter run -d chrome --web-renderer html

但它在 PC 浏览器上的性能可能会很差，因为 flutter webcanvaskit在 PC 浏览器上使用渲染器以获得更好的性能，而html在移动浏览器上使用渲染器。

请参阅网页渲染器文档