Flutterで初めてWebアプリを作ってみた
Flutter for Web
Flutter2.0がリリースされてwebが正式にサポートされたので、少しだけ触ってみようと思い立ちました。個人レベルは、Flutterを使ってAndroidアプリを作ったことがある程度のレベルです。
作ったアプリ
作成したアプリは「バーコードを作成するアプリ」です。
barcode_widgetというパッケージを使ってますが、このパッケージのデモを参考にしています。バーコードを作成してPNGダウンロードするだけの単純なアプリですが、画面やアーキテクチャは自分なりにアレンジしています。
作り方
IDEはAndroidStudioを使います。Flutterのモバイルアプリを作るやり方と一緒です。「File > New > New Flutter Project」から、Flutterのプロジェクトを作成します。
デバッグ
AndroidStudio
deviceに「Chrome (Web)」を選択して「Debug」ボタン（虫のマーク）を押すと、Chromeが立ち上がりデバッグできるようになります。
プロジェクトの中身やPCのスペックによるかもしれませんが、1～2分かかる印象です。一度起動してしまえばホットリロードが使えるので、あとは簡単にリビルドできます。
コマンド
Terminalから起動する場合はこちらです。
$ flutter run -d chrome
ビルド
Terminalからコマンドを入力してビルドします。
$ flutter build web
buildフォルダの下にwebフォルダが生成されます。このファイルをWebサーバにアップロードすれば、Webアプリとしてリリースできます。
Flutter for Web の所感
自動でPWAになる
ブラウザのアドレスバーに「インストールしますか？」と出てくるあれです。PWAを作る前提であれば、Flutterは良い選択肢になると思います。経験上、あまり要件に出てくることは少ないですが、実際どうなんでしょう。
HTMLとCSSを使わない
これにはビックリしました。Flutterとはいえ、どこかでHTMLを書くところはあるんだろうなと思いましたが、一切ありませんでした（明確には index.html だけありますが）。Dartという言語を習得すれば、AndroidアプリもiOSアプリも出来て、さらにWebアプリも出来るということです（たぶん）。
多言語対応が簡単
Webアプリの多言語対応は言語ごとにURLが違う（/ja/index.html, /en/index.html とか）のが多い印象ですが、Flutterで作るWebアプリはブラウザの言語設定を見て、表示する言語を判断してくれるっぽいです。実際に試してみましたが、言語がちゃんと切り替わりました。すごい。（chromeしか試してないけど）
最後に
正式リリースされたばかりで、まだ不安定なところもありそうです。AndroidやiOSと同じように、バージョンが変わる度にWidgetの改変などがあると思うので、追いかけていくのが大変だと思います。（どのプラットフォームもそうか・・）
半年ぶりぐらいにFlutterに触りましたが、WidgetのRaisedButton（Flutter1.xでよく疲れているボタン）がFlutter2.0で非推奨になっていたのは「えぇ、、マジか・・」と思いました。
とはいえ、規模の小さいWebアプリであれば、Flutterで十分できそうです。個人差はあると思いますが、開発速度がかなり早い印象です。この先、Flutterを使ったアプリが増えていくと、さらに盛り上がっておもしろくなるのかなと期待しています。
Discussion