...
<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;
...
4条答案
按热度按时间ss2ws0br1#
您可以通过提供Dart环境常量在Flutter Web中启用CanvasKit/Skia:
flutter
工具现在有一个很好的快捷方式:--dart-define=FLUTTER_WEB_USE_SKIA=true
**参数将常量设置为使用Skia。您还需要将其提供给flutter build web
: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
现在也可以使用以下方法完成:
提供此常量将启用渲染器检测的自动检测:
仅当未指定
window.flutterWebRenderer
时才成立。x1米11米1x
如果启用了自动检测(见上),您可以在JavaScript代码/HTML文件中动态指定渲染器:
总结
在发现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
。oo7oh9g92#
如Web renderers documentation中所述,这些是在canvaskit模式下构建/运行web的有效命令:
auto
(默认)-自动选择要使用的渲染器。当应用在移动浏览器中运行时,此选项选择HTML渲染器;当应用在桌面浏览器中运行时,此选项选择CanvasKit渲染器。html
-始终使用HTML渲染器。canvaskit
-始终使用CanvasKit渲染器。kqqjbcuj3#
本地运行
滑雪
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
cgh8pdjw4#
您还可以在运行时强制执行将以下内容添加到您的
web/index.html
:以下是web renderers和customizing web app initialization的文档。