Flutterで体重記録アプリを作ってみたよ
1. 作った理由
7月くらいから本格的にFlutterをはじめて、最初に作ろうとしたのが体重記録アプリだった。
理由は、日常的に使うアプリを作ってみたくて最初に思いついた題材がこれだったから。
その時はstateの扱いにかなり苦戦して結局最後まで作れずじまいだったけれど、
少しflutterにも慣れてきたので再チャレンジしてみたのだ！
目的は、1人でひとつのアプリを作り切ってみること。
2. アプリ概要
４ページで構成されています。
①登録＆ログインページ
：初めて使うユーザーが新規登録とログインできる。
①体重とBMIの確認ページ
：自分が記録した体重とBMI、メモを日付単位で確認できるページ。
ドロップダウンから年と月を変更できる。
鉛筆マークを押せばその日の記録を修正するページへ飛べる。
②記録ページ
：体重とメモを記録するページ。
身長と日付はあらかじめ入力されていて、もし変更があれば修正できる。
＋ボタンを押せば記録完了して、①に戻ると新しいデータが出てくる。
③グラフページ
：1週間分の体重の推移が確認できる。
グラフをタップすると日付と体重の数値が表示される。
データを記録しなかった日は０が表示される。
コード
iPhone実機でも動くことを確認ずみ^o^
3. 主な使用技術
- Flutter
- Firebase
- cloudFirestore
- Authentication
4. 設計
Figmaでデザインとアプリ導線を作った。
これをするのとしないのでは、コードを書くときの迷い度が全然ちがう！
1人でひとつのアプリを作り切ることが目的なので、機能が壮大にならないようシンプルであることを心がけた。
5. 使用したライブラリ
②flutter_hooks: ^0.18.0
：今回はstateをStateNotifierで監視する形にしたので使用。本当はfreezed(https://pub.dev/packages/freezed)も使ってクラスをimmutableにするのが良いようだけど、私はまだ理解できていないので使っていない。
freezed、簡単なアプリ（よくあるカウンタアプリ）ではやってみたことがある。 追記↓
③fl_chart: ^0.40.0
：スタイリッシュなグラフが作れる。
④cloud_firestore: ^2.5.1
：Firestoreとのデータのやり取り（取得＆追加）に使用。
⑤firebase_auth: ^3.1.0
：ログイン機能を（比較的）簡単に実装できる。
⑥firebase_core: ^1.6.0
：Firebaseのサービスを一つでも使うなら必要。
⑦persistent_bottom_nav_bar: ^4.0.2
：stateを保ったままタブ移動できる。
⑧intl: ^0.17.0
：DateTimeの形式を色々いじるのに使用。
⑨dots_indicator: ^2.0.0
：スワイプでページのインジケータを示してくれるやつ。
PageViewとセットで使った。
⑩flutter_native_splash: ^1.2.3
：アプリ起動中の画面を作るのに便利なパッケージ。使うのはほんと簡単。
6. このアプリを作る上で特に頑張ったところ
- 体重記録したら、メインページ（①）とグラフ（③）にすぐに反映されるようにしたこと。
- fl_chart（パッケージ）のグラフカスタマイズ。
- ログイン機能（初実装）
- 日付の形式変換（DateTime）
棒グラフ単体機能のコード
fl_chartにFirestoreのデータを反映させる部分がが意外と大変だったぁ。
7. 感想
本当はストアに出せるレベルのものを作ろうと思ったけど、体重管理アプリはすでにいいものがたくさんあるので断念。
でもそういう考えで作り始めたから、途中でやめずに作り切れたと思う。
今回、初めてログイン機能を実装してみたし、細かい技術まで含めると色々勉強になった。
今後も動くものを作りながら、ちょっとずつでもレベルを上げていきたい。
そして、私はいつも結構Firestoreのデータ構成で悩みがちなので、今後Firestoreを使う場合はちゃんと設計してから取り掛かることにした。
アプリ構成作成ツールというものを知ったので（遅い）これを使う。
参考記事：
Discussion