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

Question

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

Answer 1

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)

Answer 2

在网络上，flutterCanvasKit当使用 CanvasKit 运行时，一个属性将被添加到窗口中。这意味着我们可以使用dart:jsvia 访问窗口context并从那里检索属性。

布尔吸气剂

为了在这里有一个完整的示例，我想扩展GitHub 评论并添加具有条件支持的完整功能。设置该函数的最简单方法是作为布尔值 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;

根据 @yjbanov 的说法，这个 getter 仅适用于 Web，并且无论您是否在 CavasKit 上运行，都会返回。

条件逻辑

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

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';（使用指向您创建的文件的路径），这将适用于移动设备、桌面设备和 Web。您需要确保不导入或_stub版本_web。