この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
以前から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ページを動かしてみる一歩目としてデフォルトページを表示してみました。何かの役に立てば幸いです。
2
