Webレンダラー

コンテンツ

Web 用アプリを実行および構築する場合、2 つの異なる方法から選択できます。レンダラー。このページでは、両方のレンダラーと、最適なレンダラーを選択する方法について説明します。あなたの要望。 2 つのレンダラーは次のとおりです。

HTMLレンダラー: このレンダラーは、CanvasKit レンダラーよりもダウンロードサイズが小さく、次の組み合わせを使用します。 HTML 要素、CSS、Canvas 要素、および SVG 要素。
CanvasKit レンダラー: このレンダラーは Flutter モバイルおよびデスクトップと完全に一致しており、高速です。ウィジェット密度が高くなるとパフォーマンスが向上しますが、ダウンロードサイズが約 1.5 MB 増加します。キャンバスキットWebGL を使用して Skia ペイントコマンドをレンダリングします。

コマンドラインオプション

の--web-rendererコマンドラインオプションは 3 つの値のいずれかをとります。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"。
そのオブジェクトをengineInitializer.initializeEngine(configuration);のメソッドFlutter Web アプリの初期化脚本。

<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 エンジンの起動プロセス後に Web レンダラーを変更することはできませんに始まりますmain.dart.js。

使用するオプションの選択

を選択してくださいautoダウンロードサイズを最適化する場合のオプション (デフォルト) モバイルブラウザーとデスクトップブラウザーでのパフォーマンスの最適化。

を選択してくださいhtmlパフォーマンスよりもダウンロードサイズを最適化する場合のオプションデスクトップブラウザとモバイルブラウザの両方。

を選択してくださいcanvaskitパフォーマンスを優先する場合はオプションを選択し、デスクトップブラウザとモバイルブラウザの両方でピクセル完璧な一貫性を実現します。

例

デフォルトのレンダラーオプションを使用して Chrome で実行します (auto):

flutter run -d chrome

デフォルト (自動) オプションを使用して、リリースモードでアプリをビルドします。

flutter build web --release

CanvasKit レンダラーのみを使用して、リリースモードでアプリをビルドします。

flutter build web --web-renderer canvaskit --release

HTML レンダラーを使用して、プロファイルモードでアプリを実行します。

flutter run -d chrome --web-renderer html --profile