【Flutter】Webアプリの開発＆ビルド

Flutter のデフォルトでは iOS/Android が有効になっていますが、ここでは Flutter for Web（ベータ版）を有効化して Web アプリを開発＆ビルドする方法について解説します。

Flutter for Web のセットアップ

SDK チャンネルを変更する

Flutter for Web は現在（2020年2月時点）ベータ版です。Flutter SDK の stable チャンネルでは利用できないので、以下のコマンドで SDK チャンネルを master に変更します。

# SDKチャンネルを変更
flutter channel master

# SDKも更新しておきます
flutter upgrade

web を有効にする

以下のコマンドで web を有効にします。

flutter config --enable-web

#（無効にしたい場合のコマンドはこちら）
flutter config --no-enable-web

プロジェクトの作成

以下のコマンドで新規プロジェクトを作成すれば web が含まれるプロジェクトが生成されます。

flutter create myapp

---

※ 既存のプロジェクトに web を追加したい場合は、プロジェクトのルートに移動してから、以下のコマンドで web を追加することができます。

flutter create .

開発＆デバッグ

web を有効にすると、利用可能なデバイスに Chrome が追加されるので、これを使って開発＆デバッグを行っていきます。

※ コマンドで Chrome を起動する場合はこちらです。

flutter run -d chrome

ビルド

リリース用のアプリをビルドする場合は以下のコマンドを使います。

flutter build web

ビルドされたファイルは build/web フォルダに出力されます。

このファイル一式をサーバーの任意の場所に置けば Web アプリとして動作します。

※実際にFlutter for Webで作った簡単なWebアプリです。