FlutterでWebページを動かしてみた
はじめに
以前からFlutterが気になっており、Hello World的に簡単に触ってみました。 やってみたことは、プロジェクトを作成 → 開発用に動くことを確認 → Webページとしてビルドして動くことを確認、という最初の一歩と言った内容です。
簡単な内容だったのですが少し迷った部分もあったので、その点も含めて記事として書きたいと思います。
Flutter等の用意～プロジェクトの作成
Webページとして動かすためにはFlutterのバージョンを新しくしておく必要があります。私の場合は古いFlutterがインストール済だったため、以下のコマンドでアップグレードを行いました。
$ flutter channel stable $ flutter upgrade
アップグレードしたら以下のコマンドでWebに対応しているかを確認します。
$ flutter devices (中略) Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.127 (中略)
またビルドしたページをWebサーバ内で起動するのにPythonを使うため、作業環境にPythonがインストールされていない場合は入れておきます。（他に使用できるWebサーバがあればPythonは必要ありません）
Flutterを用意したら、flutterコマンドを使用してプロジェクトを作成します。
$ flutter create hello_web_app
開発用に動くことを確認
プロジェクトを作成すると、デフォルトのページが用意されます。今回は特にデザインなどは変更せず、このデフォルトのページが開発用に動くかを確認してみました。
以下のコマンドを実行します。
$ cd hello_web_app $ flutter run -d chrome (中略) An Observatory debugger and profiler on Chrome is available (中略) Flutter Web Bootstrap: Programmatic The Flutter DevTools debugger and profiler on Chrome is available (中略)
上記のコマンドを実行すると、既にChromeブラウザを開いている場合は新しいChromeが開いてページが表示されるようです。 最初は新しいChromeが開いていることに気づかず、何が起きているのか暫く分かりませんでした。
起動したChromeを確認すると以下のようなデフォルトページが表示されるかと思います。
Webページとしてビルドして動くことを確認
次にWebページとしてビルドします。
$ flutter build web
ビルドすると「build/web」配下にHTMLやCSSなどWebページの一式が作成されるようです。このフォルダに移動してWebサーバ内で動かして確認してみます。以下のコマンドを実行します。
$ cd build/web/ $ python -m http.server Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
「http://localhost:8000/」をブラウザで開くと、先のキャプチャと同じデザインのページが表示されるかと思います。ただし環境によるとは思うのですが、Pythonを使ったWebサーバの起動に時間が掛かる場合があるようです。 私の場合はブラウザで初めてページを表示するのに暫く時間が掛かりました。
最後に
FlutterでWebページを動かしてみる一歩目としてデフォルトページを表示してみました。何かの役に立てば幸いです。
