您可以通过提供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有三个选项：

• auto (default)-自动选择要使用的渲染器。当应用在移动浏览器中运行时，此选项选择HTML渲染器;当应用在桌面浏览器中运行时，此选项选择CanvasKit渲染器。
• html-始终使用HTML渲染器。
• canvaskit-始终使用CanvasKit渲染器。

请参阅 * 选择要使用的选项 * 以确定应使用的选项。

替代品

我上面描述的内容可以在flutter/engine/initialization.dart file中找到，一定要检查master分支，看看这些信息是否仍然是最新的。
在那里，您可以看到配置Flutter Web以使用CanvasKit的其他选项：

一米九一x

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

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

--web-renderer auto

提供此常量将启用渲染器检测的自动检测：

• CanvasKit将在桌面设备上使用。
• HTML将用于移动设备。

仅当未指定window.flutterWebRenderer时才成立。
x1米11米1x
如果启用了自动检测（见上），您可以在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之后，我非常欣赏下面对那里当前情况的总结：
如果启用了自动检测（由环境变量FLUTTER_WEB_AUTO_DETECT设置），开发者可以将window.flutterWebRender设置为canvaskit或html来选择渲染后端。如果window.flutterWebRender未设置，flutter引擎将canvaskit用于桌面设备，而将html用于移动设备。如果window.flutterWebRender设置为无效值（不是canvaskit也不是html），则默认为html。
如果自动检测被禁用，它将检查环境变量FLUTTER_WEB_USE_SKIA的值。如果为真，则使用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渲染器。

本地运行

滑雪

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

您还可以在运行时强制执行将以下内容添加到您的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 renderers和customizing web app initialization的文档。