如何解决如何在Flutter Web中使用Skia / CanvasKit？ FLUTTER_WEB_AUTO_DETECT

我知道Flutter支持使用WASM CanvasKit（即“ Skia + WebAssembly”）在 Flutter Web 中使用Skia代替DomCanvas。

我听说这可以显着改善性能，但是我不知道如何启用它。

解决方法

您可以通过提供Dart环境常量在 Flutter Web 中启用 CanvasKit / Skia ：

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。

选项

--web-renderer有three options：

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>
    window.flutterWebRenderer = 'canvaskit';
  </script>

  <script src="main.dart.js" type="application/javascript"></script>
  ...

摘要

在发现auto detect PR之后，我非常感谢以下有关当前情况的摘要：

如果启用了自动检测（由环境变量FLUTTER_WEB_AUTO_DETECT设置），则允许开发人员将window.flutterWebRender设置为canvaskit或html以选择呈现后端。如果未设置window.flutterWebRender，则颤动引擎将canvaskit用于台式设备，而将html用于移动设备。如果window.flutterWebRender设置为无效值（不是canvaskit或html），则默认为html。

如果禁用了自动检测，它将检查环境变量FLUTTER_WEB_USE_SKIA的值。如果为true，请使用canvaksit。否则，请使用html。

如Web renderers documentation中所述，这些是在 canvaskit 模式下构建/运行Web的有效命令：

flutter build web --web-renderer canvaskit

flutter run -d chrome --web-renderer canvaskit

-web-renderer命令行选项采用以下三个值之一：auto，html或canvaskit。

auto（默认）-自动选择要使用的渲染器。当应用程序在移动浏览器中运行时，此选项选择HTML渲染器；当应用程序在台式机浏览器中运行时，选择CanvasKit渲染器。

html-始终使用HTML渲染器。

canvaskit-始终使用CanvasKit渲染器。

要在本地运行

with skia

flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

带帆布套件

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_URL=true --release

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_CPU_ONLY=true --release