flutter-wasm-web

Flutter Web と WebAssembly（Wasm-GC）

Flutter Web では、WebAssembly（Wasm-GC）へのコンパイルに対応しており、ネイティブに近い UI 描画性能、より滑らかなアニメーション、高速な読み込みを実現できます。

目次

• コンパイルとデプロイ
• 最新の JS 相互運用（dart:js_interop と package:web）
• Wasm 固有の制限と解決策
• WebAssembly のデバッグ

---

コンパイルとデプロイ

Flutter CLI を使用して、アプリケーションを WebAssembly にコンパイルします。

flutter build web --wasm

サーバーの設定

Wasm-GC では、特定のファイルを正しい HTTP ヘッダーとともに配信する必要があります。ウェブホスト（Firebase Hosting、Cloudflare、Vercel、Nginx）に以下が含まれていることを確認してください。

• 生成された .wasm ファイルに対する Content-Type: application/wasm。
• COOP と COEP のヘッダー（パフォーマンスとマルチスレッドの安全性のために推奨）：
  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

---

最新の JS 相互運用（dart:js_interop と package:web）

Wasm-GC へのコンパイルでは、従来の dart:html、dart:js、package:js ライブラリの使用が厳しく禁止されています。標準の dart:js_interop と package:web パッケージを使用する必要があります。

JS 相互運用の基本原則

• dart:html をインポートしないでください。DOM へのアクセスには package:web/web.dart をインポートします。
• 外部 JavaScript 関数を宣言するには、@JS() アノテーションを使用します。
• 常に Dart JS 型（例：JSString、JSNumber、JSBool、JSAny、JSObject）を使用します。

例：JS API の呼び出し

import 'dart:js_interop';
import 'package:web/web.dart';

// Declare external JS API
@JS('console.log')
external void jsConsoleLog(JSAny message);

@JS('localStorage.setItem')
external void jsSetLocalStorage(JSString key, JSString value);

void main() {
  // Convert Dart types to JS types
  jsConsoleLog('Hello from Wasm-GC!'.toJS);
  jsSetLocalStorage('app_mode'.toJS, 'dark'.toJS);
  
  // Accessing the DOM via package:web
  final windowEl = window;
  jsConsoleLog(windowEl.location.href.toJS);
}

---

Wasm 固有の制限と解決策

1. dart:io は使用できません

• 影響：ファイルシステム、Socket、標準 HTTP クライアントはコンパイルできません。
• 解決策：package:http（ブラウザー標準の Fetch API に解決されます）を使用し、キャッシュには IndexedDB またはローカルストレージを使用します。

2. Isolate／スレッドの制限

• 影響：標準の Dart VM isolate は WebAssembly では動作しません。Isolate.spawn や compute() を呼び出すと、Web では実行時エラーが発生します。
• 解決策：重い処理が必要な場合は、JS 相互運用を介してウェブワーカースレッドを使用するか、メインスレッドで計算を小さな単位に分けて実行します。

3. フォントとアセットの読み込み

• 影響：Wasm コンパイルでは、CanvasKit を使用してウィジェットを描画します。フォールバックフォントでの描画を防ぐには、カスタムフォントを pubspec.yaml に明示的に宣言する必要があります。

---

WebAssembly のデバッグ

• Chrome デベロッパーツール：Chrome は Wasm-GC のソースマップのデバッグに対応しています。Chrome の Sources パネルで Dart のソースコードを直接確認できます。
• 互換性の確認：flutter run -d chrome --wasm を使用して、ローカル環境で Wasm を実行し、デバッグします。