Flutterでビンゴゲームをつくった
もう何年も昔になるんですが、社会人一年目の頃、忘年会の幹事やることになって、ビンゴをやることになったんですね。
そんとき、ビンゴゲームのアプリをつくって、みんなをビックリさせようと妄想したんですが、その頃は僕にスキルがなかったので、普通にググって出てきたものを使いました。
今回Flutterのチュートリアルを終えて、何かつくろうと思ったときに、せっかくなら昔挫折（というかチャレンジもしてませんが）したものがいいと思って、ビンゴゲームをつくりました。
何をつくったか
下記で試せます。
１〜７５までの数字がランダムに出力して、タップするとその数字が選択肢からなくなって、75回押すと「終」となる、というシンプルな仕様です。
押した数字は下に残るので、確認タイムにも使えます。
当初はこんな設計図でした。
つくる前はビンゴが1〜75までしか出ないことを知らなくて、「１００ぐらいまで？」と思ってました。
UIがちょっとアレ
75回押し終わった後の表示がこんな感じです。
時間切れなんでもうこれ以上整える気持ちはないですが、正直ちょっとうーんって感じです。
- ルーレットの数字をタップしたとき、下のリストに追加される順番がわかりづらくなった
- ↑のせいでユーザー自身が自分のタップした数字がわからなくなるときが稀によくある
- ビンゴ画面からスタート画面戻るときは確認ダイアログが欲しかった
ただ真ん中の問題には、ルーレットボタンの左隣に一つ前の数字を表示してやればわかりやすくなると思うので、
そこ対応すれば実用には耐え得るのではないかと思います。
（あとビンゴゲームなんで、もう少し装飾やエフェクトを入れて、盛り上がる感じにしたいですね）
もし何かに使いたい方がいたら、↓ソースはこちらに置いてありますので、いいように変更して使ってください。
Flutterの「強さ」
今回はデプロイ環境としてはHerokuにあげただけですが、僕の開発環境だと同じアプリがiOS/Android/macOS/Webの４環境でビルドできています。
-
iOS
-
Android
-
macOS
今回のアプリは商用じゃないんでアレでしたが、本気でビジネスユースに使うならいいですよねこれ。
Dartがちょっとアレ
開発中の細かいことは↓のスクラップに書きました。
振り返ってみると、Dartの記法がなんか最後まで合わなかったです。
モダンなプログラミング言語でやれることはだいたいできる感じになってるんですが、なんか貧弱さを感じました。
Swiftと比べてしまうからですかね？
一番今回の開発でコード的に入り組んだところが、たぶん↓なんですが、
Widget _buildRow(int start, int end) {
var _filtered =
_saved.where((element) => start <= element && element <= end).toList();
_filtered.sort();
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _filtered.map((e) => Text(e.toString())).toList());
}
filter処理がwhereで書くのも小さな違和感なんですが、なんかそれをtoList()噛ませないとListで返してくれないんですよね。
sort()はList自体を変更してしまうので、一度配列をコピーする必要がありました。
ソートした配列を返すメソッドも欲しいですね。
FlutterアプリのHerokuへのデプロイ
そうそう。書き忘れるところでした。
FlutterアプリのHerokuデプロイには、下記を使いました。
こんなコマンドでできました。
heroku login --interactive
heroku create
heroku buildpacks:set diezep/flutter -a <heroku-app-name>
git push heroku main
Flutter使うモチベーションはモバイル対応だと思うので、あんまりHerokuでデプロイした需要もないんだとは思いますが……
Discussion