flutter - 如何在 Flutter Web 中使用 Skia/CanvasKit？

Question

我知道 Flutter 支持在 中使用 Skia 而不是 DomCanvas flutter 网使用 WASM CanvasKit ，即“Skia + WebAssembly”。
我听说这提供了显着的性能改进，但是，我不知道如何启用它。

Answer 1

您可以启用 CanvasKit/Skia 在 flutter 网通过提供 Dart 环境常量:

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

flutter工具现在有一个很好的快捷方式:

flutter run -d chrome --web-renderer canvaskit

--dart-define=FLUTTER_WEB_USE_SKIA=true 参数将设置常量以使用 Skia。您还需要将其提供给 flutter build web :

flutter build web --web-renderer canvaskit

Learn more about web renderers in Flutter .
选项
有 three options对于 --web-renderer :

auto (default) - 自动选择要使用的渲染器。此选项在应用程序在移动浏览器中运行时选择 HTML 渲染器，在应用程序在桌面浏览器中运行时选择 CanvasKit 渲染器。

html - 始终使用 HTML 渲染器。

canvaskit - 始终使用 CanvasKit 渲染器。

见 Choosing which option to use来决定您应该使用哪个选项。
备择方案
我上面描述的可以在 flutter/engine/initialization.dart file 中找到。 .请务必检查 master分支以查看信息是否仍然是最新的。
在那里，您可以看到配置 Flutter Web 以使用 CanvasKit 的其他选项: FLUTTER_WEB_AUTO_DETECT

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

现在也可以使用以下方法完成:

--web-renderer auto

提供此常量将为渲染器检测启用自动检测:

CanvasKit 将用于桌面设备。

HTML 将用于移动设备。

仅当您不指定 window.flutterWebRenderer 时才适用。 . window.flutterWebRenderer如果您启用自动检测(见上文)，您可以在 JavaScript 代码/HTML 文件中动态指定渲染器:

...

<script>
  // This sets the Flutter web renderer in auto detect mode.
  // See https://stackoverflow.com/a/64583462/6509751.
  window.flutterWebRenderer = 'canvaskit';
</script>

<!-- This script installs service_worker.js to provide PWA functionality to
     application. For more information, see:
     https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
  var serviceWorkerVersion = null;
  ...

概括
发现 auto detect PR后，我真的很感谢那里的现状总结如下:

If auto detect is enabled (set by environment variable FLUTTER_WEB_AUTO_DETECT), developers will be allowed to set window.flutterWebRender to either canvaskit or html to select the rendering backend.If window.flutterWebRender is not set, flutter engine will use canvaskit for desktop device while using html for mobile device.If window.flutterWebRender is set to an invalid value (not canvaskit nor html), it will default to html.

If auto detect is disabled, it will check the value of environment variable FLUTTER_WEB_USE_SKIA. If true, use canvaksit. Otherwise, use html.