Flutter Webアプリの開発環境準備方法

この記事は我流の開発準備方法を書いた記事です。僕がFlutter Webアプリを作成するときに、「Flutter Webを有効にしないと..」「ホスティングどうやるっけ..」と毎回調べるのが面倒になったのでまとめました。

我流なので、リポジトリの作成など私的に必要な部分も書いています。必要ない人は読み飛ばしてください。それでは本文を始めます。

Flutter Webを有効にする

まずは、下のコマンドでFlutterチャネルをベータに切り替えます。(チャネルについて)

flutter channel beta

次に、下のコマンドでFlutter SDKを最新バージョンに更新します。

flutter upgrade

最後に、下のコマンドでWebを有効にします。

flutter config --enable-web

以上でFlutter Webを有効にできました。

Flutter Projectを作成する

僕は最初にGitHubセットアップをしておきたいので以下の手順を踏みます。ここは各自のやり方次第でスキップ可能です。
1.GitHubにプライベートリポジトリを作成
2.Fork(Gitのクライアントツール)でcloneしてローカルリポジトリを作成

ここからがFlutter Projectの作成方法です。

まずは、下のコマンドで先程作成したローカルリポジトリのディレクトリにFlutter Pfojectを作成します

flutter create アプリ名

次に、下のコマンドで作成したFlutter Projectのディレクトリへ移動します。

cd 作成したアプリ名

最後 に、下のコマンドでアプリをクローム上で起動してFlutter Projectができたことを確認します。

flutter run -d chrome

以上でFlutter Projectの作成は完了です。

Firebaseのセットアップ

まずは、Firebaseコンソールで「プロジェクトを追加」でプロジェクトを作成します。作成をしたらそのままHostiongを有効にしておきます。(全て「続ける」で進めてOK)

次に、下ののコマンドでFlutter Projectのディレクトリ上でFirebaseの設定をします。

firebase init

聞かれる質問に対しては以下の通りに答えます
1.Hostingを選択(スペース)してエンター
2.Use an existing projectでエンター
3.作成したFirebase Projectでエンター
4.[build/web]と打ち込んでエンター(公開するディレクトリ)
5.[N]を打ち込んでエンター(SPAについて)
6.[N]を打ち込んでエンター(GitHubについて)

以上でFirebaseのセットアップは完了です。

ホスティングをテストする

テストでデプロイしてホスティングできているか確認します。確認ができたらテストなのでホスティングを停止します。手順は以下の通りです。

❶下のコマンドでbuild/webのフォルダを出力する

flutter build web

❷下のコマンドでデプロイする

firebase deploy

❸表示されたURLでデプロイを確認できたら下のコマンドでホスティングを停止する

firebase hosting:disable

自分はこれでmasterブランチに「init FlutterFire Project」とコミットして、開発をスタートさせます。ご参考になれば幸いです！