如何在Flutter Web中渲染SVG

Question

我的最终目标是将Flutter移动应用程序转换为Flutter web应用程序。我在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插件中修复此问题？

Answer 1

现在您可以使用Image.networkFor 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)

Answer 2

My Flutter web应用程序将在桌面web浏览器中呈现SVG，而不是在移动web浏览器中。我发现有必要使用canvaskit支持进行构建，以便SVG在移动设备上呈现：

flutter build web --web-renderer canvaskit

然而，文档中指出，canvaskit增加了大约2MB的下载量，这对我来说是一个交易破坏者。很遗憾，但在这个问题得到解决之前，我将使用光栅图像。