always DRINKのパス表示アプリをFlutterで作ってみた

まえおき

always DRINKを契約してから、本当にコンビニコーヒーを飲まなくなった。ハニー珈琲は最高である。ただ、サブスクリプションを悪用して、変な人も増えてきた気もする...（苦笑）　イジゲンって会社には今後も頑張ってほしい。

さて、自分用に作ったalwaysDRINKのパスをササっと表示するアプリは、毎日使っているし、継続的に手を加えて使いやすくしている。

github.com

これ一部の方々には反響(?)があって、

type-b.org

自分以外でも同じようにこういう機能欲しいと感じてる人はいたんだなーというのがわかって、ちょっと自信（？）がついた。

アプリ作るのが飽きてきた

自分はウルトラ飽き性なので、自分が欲しい機能をあらかた作り終えたら、改善を重ねていくモチベーションが落ちてきてしまった。

そんなわけで、先述の自信（？）がつづいている間に、いくつかスパイスを放り込んでみることにした。

お店でalwaysDRINKを使っている人の様子を見るに、alwaysDRINKパス表示アプリはあると便利だという確信はある。なんだけど、+αするならどの層にターゲッティングすればいいのかなーってのを探りをいれたかった。

2行直せばalwaysLUNCHで使えるようになる

福岡だけじゃなく京都でも使えるようにする

iOSでもある程度は使えるようにする（Flutterで作った）

ーーー

　

まだ有意に結論が出せる時点ではないのだけど、趣味で続けていくならalwaysLUNCHに手を広げてみる、本格的にイジゲンに売り込む（つもりはないけどｗ）ならiOS対応かなー、と思っている。

初めて本格的にFlutterを使ってみた

今回、iOSアプリをSwiftで書くほどのモチベーションはなかったので、ほぼシングルページアプリであることからFlutterでもとのAndroidネイティブアプリをリメイクしてみた。

思考過程はこんなかんじ。

Flutterで実装をあきらめたところ

FlutterはGoogle Mapを使うにはまだちょっと機能が足りなかった。ネイティブアプリで使っていてFlutterで実現できなかったのが

あと、何かボタンを押したときや測位が完了したときに animateCameraする例はぐぐれば結構どこにでもあるんだけど、緯度経度をstateで管理していてstateが変わったときにその緯度経度に向かってanimateCameraするような例はほとんど出てこなかった。近々Qiitaにでもまとめて書こうと思う。(→2019.10.24追記。かいた - FlutterでState管理されている緯度経度に向かってGoogleMapController#animateCamera する - Qiita ) 　

GoogleMap以外でも、（モーダルじゃないPersistentなほうの）ボトムシートも使い方がよくわからなかったので、固定表示にしちゃった。

Flutterで最高の開発ができたところ

ただ、7割くらいはFlutterでラクできたと思う。

  • もう画面回転でもなんでもこい
    • ViewModelとActivityのどっちにどうやって値もたせようとかほとんど悩まなくてよかった
  • ListViewがめちゃくちゃラク
    • AdapterもViewHolderもいらない。childrenに突っ込んだものが勝手にリストになってくれるのが最高
  • HTTP通信とネットワーク上の画像表示が標準でできるのが神

まとめると

こんな感じだと思う。

いちおう成果物を貼っておく

Flutterの理解を深めるために今後少し継続的に触ろうとは思うけど、一旦2019/10/21時点での成果物は貼っておく。

iOSアプリはAndroidほどカジュアルに配布できないっぽい？　もしも使ってみたいよって人がいたらどういう手順で何をすればいいのかもわかってないので、詳しい方、ぜひ教えて下さい。

github.com