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アプリです。
コメント