Web 渲染器
你可以選擇兩種不同的渲染器來執行和建立 Web 應用。下文將介紹這兩種渲染器以及它們的適用場景：
使用 HTML 渲染
使用 HTML，CSS，Canvas 和 SVG 元素來渲染，應用的大小相對 CanvasKit 較小。
使用 CanvasKit 渲染
應用在移動和桌面端保持一致，有更好的效能，以及降低不同瀏覽器渲染效果不一致的風險。但是應用的大小會增加大約 2MB。
指令行引數
--web-renderer 可選引數值為 auto、html 或 canvaskit。
-
auto（預設）- 自動選擇渲染器。行動端瀏覽器選擇 HTML，桌面端瀏覽器選擇 CanvasKit。 -
html- 強制使用 HTML 渲染器。 -
canvaskit- 強制使用 CanvasKit 渲染器。
此選項適用於 run 和 build 指令。例如：
flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit
如果執行/建立目標是非瀏覽器裝置（即行動裝置或桌面裝置），這個選項會被忽略。
設定執行時
要覆寫 web 實時渲染器請執行以下操作：
-
使用
auto選項建立應用。 -
準備一個
renderer屬性設定為"canvaskit"或"html"的設定物件。 -
將這個物件在 Flutter Web 應用初始化 的時候傳給
engineInitializer.initializeEngine(configuration);方法。
<body>
<script>
let useHtml = true;
window.addEventListener('load', function(ev) {
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function(engineInitializer) {
let config = {
renderer: useHtml ? "html" : "canvaskit",
};
engineInitializer.initializeEngine(config).then(function(appRunner) {
appRunner.runApp();
});
}
});
});
</script>
</body>
Flutter engine 啟動之後無法再在 main.dart.js 更換 web 渲染器。
選擇合適的渲染器
如果你在行動端瀏覽器平台上更關心應用大小，而桌面端瀏覽器更關心效能，請選擇 auto 選項（預設）。
如果你在行動端和桌面端都更關心應用大小，請選擇 html 選項。
canvaskit：行動端和桌面端都更關心效能，和跨瀏覽器的畫素級一致性。
範例
在 Chrome 瀏覽器上使用預設 (auto) 渲染器執行：
flutter run -d chrome
使用預設 (auto) 渲染器建立應用（發布模式）：
flutter build web --release
使用 CanvasKit 渲染器建立應用（發布模式）：
flutter build web --web-renderer canvaskit --release
使用 HTML 渲染器建立應用（發布模式）：
flutter run -d chrome --web-renderer html --profile