Flutter on the Web とは

Flutter on the Web とは Flutter で作成したアプリケーションを Web 上で動かせるようにする機能です。

ここでは、Flutter on the Web のアプリケーション開発を行うための前提知識をまとめます。

Flutter on the Web の仕組み

Dart で書かれたアプリケーションは JS にビルドされ、レンダラは Web Assembly にビルドされます。

レンダリング方式は HTML と CanvasKit の２種類があります。HTML 方式の方が初期ローディング時間が短く、CanvasKit 方式の方がレンダリングパフォーマンスが高いとされています。

レンダリング方式には auto もあり、これはモバイル向けブラウザの場合に HTML 方式でレンダリングを行い、デスクトップ向けブラウザの場合に CanvasKit 方式でレンダリングされるダイナミックな方式になります。

Flutter のコマンドから Flutter プロジェクトに web 向けの asset を追加することができます。

Web 上で動作するコードでは、 Platform class を使用することができません。そこで、 Platform class が使用されている箇所は kIsWeb という定数の値によって処理の分岐を行います。

その他 Web に互換性のないコードについては基本的に kIsWeb の値による分岐を行う必要があります。

Web のレンダラが初期化を完了するタイミングで任意のメソッドを実行させることができます。Flutter on the Web にアクセスされてからレンダラの初期化が完了されるまでのローディング時間にローディングUIを表示させるなどの処理を走らせることができます。

処理を書くには、index.html のインラインスクリプトにて、onEntrypointLoaded に関数を実装します。

Flutter on the Web でビルドすると build/web ディレクトリ配下に各種 web 向けの asset が生成されます。

下記のコマンドからモード別のビルドを行うことができます。

release mode

flutter build web --release --web-renderer $RENDERER --dart-define=flavor=$FLAVOR

profile mode

flutter build web --profile --web-renderer $RENDERER --dart-define=flavor=$FLAVOR

上記のコマンドによって dart コードは dart2js によって js にコンパイルされます。

ビルドによって生成された build/web ディレクトリ配下のファイル全てを任意の Web サーバーにホスティングすることによって配信することができます。