Flutter Webが本体に帰ってきた
Flutterは今までAndroid, iOSに両対応したMobile Appが作れるフレームワークとしていましたが、Flutter1.9から別に開発されてきていた「Flutter for Web(Hummingbird)」が統合され、晴れてFlutter Webとなりました!
これでAndroid, iOSと同列でWebアプリにも同一コードで対応できるようになったわけです。(まだテクニカルプレビューなので注意)
早速やっていく
まずはflutter 1.9以上が必要なのでアップデートしましょう。
(私の環境が変なのはあしからず)
>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel master, v1.12.5-pre.21, on Microsoft Windows [Version 10.0.18362.476], locale ja-JP) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.1) [√] Chrome - develop for the web [√] Android Studio (version 3.5) [√] VS Code (version 1.40.2) [√] Connected device (2 available) • No issues found!
そうしたら File > New > New Flutter Project... から新しいプロジェクトを作ります。
BMIを計算するアプリを作ります
Projectが作成されると、ディレクトリにWebが追加されているのが分かると思います。
適当にコードを変更して、Chromeからデバッグしてみましょう。
コマンドラインから、
>flutter run -d chrome
でできます。
できました。ここまでWeb向けのコードは一切書く/書き換えていません。HotReloadも使えます。
公開してみる
Flutter WebはコードをJSにトランスパイルしてWebページの作成を実現しています。要は静的ページです。と、いうことは、
GitHub Pagesで無料で公開できる!
というわけです。やっていきましょう。
>flutter build web
でトランスパイルします。すると build > web にファイルが生成されます。
そうしたらGitHubで適当にRepositoryを作り、Webの階層からpushしましょう(rebuildしたら消えるので別に移動した方が良い)。
Pushが完了したら、GitHubのページに行き、Settings > GitHub Pages でmasterブランチを選びます。
1分も待てば公開されます。当然独自ドメインも使えますよ。
https://organic-nailer.github.io/calc_bmi_web_app/
今回作ったのがこれです。記事書きながらでも1時間かかりませんでした。
...わかりますかこの速度感!!これはやばいですよ(アプリ開発者の感想)
まとめ
いかがでしたか?
まだテクニカルプレビューですが触る限り大きなバグは見られず、試用程度なら十分に使えると思いました。Stableになるのが非常に楽しみです。
ちなみにFlutter Webでいくつかアプリを作っているので、よければ遊んでみてください
この2つは1日で作成
動物将棋 https://doubutsu.fastriver.dev/#/
ルーレット https://roulette.fastriver.dev/#/
Android版から移植
クラタン https://clatan.fastriver.dev/#/
今回作ったアプリのコードはGitHubに転がしておきます。参考にどうぞ