Flutter:既存のプロジェクトにwebサポートを追加する

学習用に作成したカウントダウンタイマーですが、後からweb版でビルドしてみたくなったので試してみました。

公式では、こちらにwebサポート方法が記載されています。
以下に、ざっと手順を書き出します。

まず、Chromeをインストールします。

そして、flutterのwebを有効にします。ターミナルで次の操作をします。

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

web設定が有効になったか確認します。

$ flutter devices
# 有効の場合、次のような応答があります。
2 connected devices:

Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.116
Web Server • web-server • web-javascript • Flutter Tools

既存のプロジェクトにwebサポートを追加します。

# プロジェクトのルートディレクトリに移動します。
$ cd プロジェクトのルートディレクトリ
# web supportを追加します。
$ flutter create .

追加後は、プロジェクトのルートディレクトリ配下にwebディレクトリが追加されます。

では、アプリをブラウザ上で動かしてみます。

$ flutter run -d chrome

カウントダウンタイマーをブラウザで動作させてみると次のように表示されました。

そして、ビルドする場合は、次のコマンドを実行します。

$ flutter build web

ビルドされたファイル一式は、
プロジェクトルートディレクトリ/build/web配下に格納されます。
ちなみに、ビルドしたカウントダウンタイマーをGitHub Pagesにあげてみました。

今回は、既存のプロジェクトにwebサポートを追加する方法を紹介しました。
Flutterの凄さを垣間見ました😊