Flutterで初めてWebアプリを作ってみた

2 min read読了の目安(約1800字

Flutter for Web

Flutter2.0がリリースされてwebが正式にサポートされたので、少しだけ触ってみようと思い立ちました。個人レベルは、Flutterを使ってAndroidアプリを作ったことがある程度のレベルです。

作ったアプリ

作成したアプリは「バーコードを作成するアプリ」です。

https://barcode-maker.ponwink.com/

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を使ったアプリが増えていくと、さらに盛り上がっておもしろくなるのかなと期待しています。