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

Question

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

flutterdartflutter-webskiacanvaskit

15

我知道Flutter支持使用WASM CanvasKit 中的Skia代替DomCanvas在Flutter Web中绘图，即“Skia + WebAssembly”。

我听说这可以显著提高性能，但是我不知道如何启用它。

- creativecreatorormaybenot

4个回答

5

如Web渲染器文档所述，以下是使用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 渲染器。

- dees91

0

本地运行

使用 skia

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

使用 canvas kit

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

- sultanmyrza

0

您还可以在运行时强制执行它，将其添加到您的web/index.html中：

window.addEventListener('load', function (ev) {
        // Download main.dart.js
        _flutter.loader.loadEntrypoint({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          },
          onEntrypointLoaded: async function(engineInitializer) {

        // Configure the engine options
        let engineOptions = new _flutter.JsFlutterConfiguration();
        engineOptions.renderer = "canvaskit";

        // Initialize the Flutter engine
        let appRunner = await engineInitializer.initializeEngine(engineOptions);

        // Run the app
        await appRunner.runApp();
      }
    });
  });

这里是Web渲染器和自定义Web应用程序初始化的文档。

- parkorian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- creativecreatorormaybenot · Accepted Answer

您可以通过提供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

了解Flutter中的Web渲染器。

选项

--web-renderer有三个选项：

auto (默认) - 自动选择要使用的渲染器。当应用在移动浏览器上运行时，此选项选择HTML渲染器；当应用在台式机浏览器上运行时，则选择CanvasKit渲染器。
html - 始终使用HTML渲染器。
canvaskit - 始终使用CanvasKit渲染器。

请查看选择要使用的选项以决定使用哪个选项。

替代方案

上述内容可在flutter/engine/initialization.dart文件中找到。请务必检查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://dev59.com/zVIG5IYBdhLWcg3wiApO#64583462.
  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;
  ...

概述

在发现自动检测 PR之后，我真的很感激以下对当前情况的总结：

如果启用了自动检测（通过环境变量FLUTTER_WEB_AUTO_DETECT设置），开发人员将被允许将window.flutterWebRender设置为canvaskit或html以选择渲染后端。如果未设置window.flutterWebRender，Flutter引擎将在桌面设备上使用canvaskit，而在移动设备上使用html。如果将window.flutterWebRender设置为无效值（既不是canvaskit也不是html），它将默认为html。

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