Flutter:既存のプロジェクトにwebサポートを追加する
Published in
2 min readFeb 21, 2020
学習用に作成したカウントダウンタイマーですが、後から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の凄さを垣間見ました😊