Flutter for Web で Webアプリを開発&ビルドする

Flutter

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が有効になっていれば、Android StudioVisual Studio Code から新規作成しても web が含まれるプロジェクトが生成されるようになります。


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

flutter create .

開発&デバッグ

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

Android Studio

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

flutter run -d chrome

ビルド

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

flutter build web

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

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

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

コメント

タイトルとURLをコピーしました