如何检测 Flutter web CanvasKit 或 HTML 渲染器？答案

【问题标题】：How to detect Flutter web CanvasKit or HTML renderer?如何检测 Flutter web CanvasKit 或 HTML 渲染器？
【发布时间】：2020-11-22 05:37:44
【问题描述】：

Flutter Web 目前有两个后端，分别是 HTML 和 CanvasKit。作为库作者，出于性能原因，我想确定应用程序当前正在哪个后端运行。有没有办法在代码中检测到这一点？

【问题讨论】：

您是否在问您的 Flutter 网站是否使用 CanvasKit 构建？如果您没有在发布时使用启用 CanvasKit 的标志进行编译，那么您没有启用 CanvasKit。现在CK有很多问题，大多数事情都行不通。
如我所说，我是一名图书馆作者。我无法控制我的客户会选择哪个后端。
我认为您目前无法轻易检测到，因为“没有人”应该将 CanvasKit 用于生产网站……大多数东西都坏了。最大的不同是正常发布模式有一个 Shadow DOM，其中 HTML 元素正在渲染，另一种在画布上执行每个人。同样，我认为如果没有从 Google 或社区创建的适当方法，您现在无法轻松检测到。

标签： flutter dart flutter-web

【解决方案1】：

所以我终于找到了。我注意到 HTML 正文包含一个名为“fit-renderer”的属性，它指定使用的渲染器。所以你可以使用下面的代码

import 'dart:html' as HTML;

bool get usingHtmlRenderer =>
    html.document.body.getAttribute("flt-renderer").contains("html");

如果您使用的是 HTML 渲染器，则返回“true”，如果您使用的是 canvaskit，则返回“false”。

【讨论】：

【解决方案2】：

在 Web 上，使用 CanvasKit 运行时，flutterCanvasKit 属性将添加到窗口中。这意味着我们可以使用dart:js 通过context 访问窗口并从那里检索属性。

布尔吸气剂

这里有一个完整的例子，我想扩展GitHub comments 并添加一个有条件支持的完整函数。设置函数的最简单方法是使用布尔 getter：

import 'dart:js';

/// Whether the CanvasKit renderer is being used on web.
///
/// Always returns `false` on non-web.
bool get isCanvasKit => context['flutterCanvasKit'] != null;

此 getter 仅适用于 Web，无论您是否在 CavasKit 上运行，都会返回 according to @yjbanov。

条件逻辑

为了使您的应用在非网络（移动和桌面）上编译，您需要确保在非网络上运行时不导入此文件。
最简单的方法是使用条件导出：

export 'canvas_kit_stub.dart' if (dart.library.html) 'canvas_kit_web.dart';

您将上面的行存储在一个名为canvas_kit.dart 的文件中。然后，将上面的 getter 存储在同一目录中名为 canvas_kit_web.dart 的文件中。最后一步是创建存根文件 (canvas_kit_stub.dart)，其内容如下：

/// Whether the CanvasKit renderer is being used on web.
///
/// Always returns `false` on non-web.
bool get isCanvasKit => false;

导入

现在，您可以简单地import 'canvas_kit.dart';（路径指向您创建的文件），这将适用于移动设备、桌面设备和网络。您需要确保不导入_stub 或_web 版本。

【讨论】：

【解决方案3】：

Flutter 2.0 更新（2021 年 3 月）

现在有一个新的“自动”模式来选择网络渲染器。正确的检查方法在https://github.com/flutter/flutter/issues/73369#issuecomment-760543461中描述

import 'dart:js' as js;
final isCanvasKit = js.context['flutterCanvasKit'] != null;

（来源：github.com/slavap）

在 Flutter 仓库中挖掘问题后，我自己找到了答案

截至2020年8月，您可以通过

检测后端是否为CanvasKit

const bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false)

【讨论】：