如何在 Flutter Web 中渲染 SVG？

Posted 2023-02-23

【中文标题】如何在 Flutter Web 中渲染 SVG？

【英文标题】：How to render SVG in Flutter Web?

【发布时间】：2020-11-07 03:44:44

【问题描述】：

我的最终目标是将 Flutter 移动应用程序转换为 Flutter 网络应用程序。 我在 Flutter 移动应用中使用了flutter_svg，但在 Flutter Web 应用中无法使用。

Flutter web 的替代插件是什么？

当我使用 flutter run -d chrome 在 chrome 中运行项目时出现错误。

The following UnimplementedError was thrown during paint():
UnimplementedError

The relevant error-causing widget was:
  RawPicture
  file:///C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/svg.dart:729:22

When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 214:49  throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/src/ui/canvas.dart 898:5                               drawPicture
packages/flutter_svg/src/render_picture.dart 193:12                                                                        paint
packages/flutter/src/rendering/object.dart 2264:7                                                                          [_paintWithContext]
packages/flutter/src/rendering/object.dart 184:12                                                                          paintChild
packages/flutter/src/rendering/proxy_box.dart 131:14                                                                       paint

或者如何在 Flutter Web 的 flutter_svg 插件中解决这个问题？

【问题讨论】：

考虑在github flutter_svg issues上创建问题

【参考方案1】：

现在您可以使用 Image.network 为 web 渲染 svg 像这样

child: kIsWeb 
    ? Image.network("/assets/$assetName",
    width: width,
    height: height,
    fit: fit,
    color: color,
    alignment: alignment,
    semanticLabel: semanticsLabel)
    : SvgPicture.asset(assetName,
    width: width,
    height: height,
    fit: fit,
    color: color,
    alignment: alignment,
    semanticsLabel: semanticsLabel)

【参考方案2】：

我的 Flutter Web 应用程序将在桌面 Web 浏览器中呈现 SVG，但不能在移动 Web 浏览器中呈现。我发现有必要使用 canvaskit 支持构建，以便 SVG 在移动设备上呈现：

flutter build web --web-renderer canvaskit

但是，docs 表示 canvaskit 增加了大约 2MB 的下载大小，这对我来说是个大问题。遗憾的是，在解决此问题之前，我将使用光栅图像。