Calendar Viewで情報入力をできるようにする

gakuh commented 5 years ago

WHY

日付をベースに情報を入力（生理、体調など）をしたい

WHAT

カレンダーが表示されて、日付をレンジで入力できる
日付から入力されたデータを編集できる

4/11日追記：他の既存ビューに干渉しないようにする

イメージするアプリ

Eve https://itunes.apple.com/us/app/period-tracker-app-eve/id1002275138?mt=8

カレンダーでの入力（GitHub上ではmp4が貼り付けれないため） https://satudora-digital.slack.com/archives/CEQL3JVAS/p1554425504000100

REF

https://github.com/anicdh/date_range_picker

TetsuFe commented 5 years ago

標準ライブラリでできること

標準ライブラリにはカレンダーの雛形を作ってくれるものは見当たらない
- 検索に引っかからないだけの可能性はある

サードパーティライブラリ

使ったことがあるもの

flutter_calendar_carousel
- star: 229(2019/04/09 18:44)
- 最終更新：28日前
- URL: https://github.com/dooboolab/flutter_calendar_carousel
- カルーセル的な月単位の切り替えが可能
- タップすると数種類のマーカーがつけられる
- 日本語対応も簡単
- デメリット：日付をタップした時のコールバックはつけられなさそう

date_range_picker
- star: 75(2019/04/09 18:44)
- 最終更新：11日前
- URL: https://github.com/anicdh/date_range_picker
- カレンダーをモーダルで表示できる（モーダルでの表示が基本なので常時出ているものを想定はしていなさそう）
- カレンダーとしての機能は最低限

使ったことがないものの今回の目的にマッチしていそうなもの

flutter_calendar
- star: 191(2019/04/09 18:38)
- 最終更新：26 days ago
URL: https://github.com/apptreesoftware/flutter_calendar
基本的なカレンダーの見た目を簡単に作れる
メリット: onDateSelectedというパラメータで日付をタップした時の挙動を簡単に注入可能（ドキュメントを見た感じ）

TetsuFe commented 5 years ago

flutter_calendarが要件的に合っていそうなのでこれを試してみます

カスタマイズが難しそうであればゼロから作ることを検討します

TetsuFe commented 5 years ago

flutter_calendarを試していましたが、月単位の表示をするときに開閉式になってしまいます

初期表示が必ずこのように折りたたまれた状態になってしまうので、用途によってはワンステップ余計にかかってしまいます

展開することもできますが上記の通りワンステップかかります

タップ時のイベントを設定できるのがこれだけという理由でflutter_calendarを試していましたが、よく見るとflutter_calendar_carousel もタップ時のイベントを設定できそうなのでそちらも試してみようか迷いどころではありますが、結局スタイルの細かい問題を考えると自作の方向で行く方が正しいような気がして迷っています

TetsuFe commented 5 years ago

他のビューとの干渉

カレンダースクリーンに遷移する用のボタンをつける際、他のStack系Widgetの下にそのボタンを追加してしまうとレイアウトが崩れてしまいます。

（下の画像の黒くなっているところにモーダルが表示されているのですが、隠れてしまっています）

カレンダーの実装が終わった後に調整しようと思います

TetsuFe commented 5 years ago

@gakuh 生理周期のレンジ入力の時の確定・入力途中のキャンセル・入力後の修正方法をどうすればいいか迷っています

例えば順に二つ日付をタップした後に確定ボタンを押すようにするか、順に二つ日付をタップしただけで入力確定となるかの2通りが考えられます michiruの場合だと前者のような確定ボタンを押す形になっています

D514F681-82A8-4341-967E-F9BAAA7638E5

gakuh commented 5 years ago

@TetsuFe 前者の方がユーザにとって安心感があるので前者で！後者をしたい場合は、edit in place（表示しているものをそのまま編集できる）形で実現した方がユーザにとってわかりやすい

UIの設計上は以下の3つのレベルに分けれられて、↓に行くほど技術的には難易度が高い。

情報の編集ボタンを押す→入力専用のFormがModalで出る→Formに情報入力する→確定ボタンを押す→Modalが閉じて変更がViewに反映される
情報の編集ボタンを押す→表示のviewが編集Formに変わる→Formに情報を入力→確定ボタンを押す→変更がViewに反映
情報の編集ボタンを押す→表示のviewが編集Formに変わる→Formの情報を入力とともに変更がViewに反映

Eveは、Calendarの表示と編集を同じ画面で完結して、ボタンのアクションを全て省いているので一番下のレベル。画面遷移やアクションが少ないので良いけど、ユーザの学習コストが高い&誤動作を誘発しやすい。対して、Michiruはユーザの学習コストは低いし誤動作は起きにくいが、アクションのステップ数が多いので同じ作業を繰り返しやるにはユーザにとっては手間。考え方として、ユーザの利用頻度が高い場合はある程度の高い学習コストがあってステップ数を減らすことに注力してもよい。ただ、頻度が低い場合は前回行った動作を忘れる可能性が高いので安全なUIにした方がよい。

今回つくるアプリの利用頻度は最初は高くないので、ユーザにとって学習コストが低い予測可能性が高いUIで実装するのがよい

TetsuFe commented 5 years ago

まずは以下の方法で作成してみました

情報の編集ボタンを押す→入力専用のFormがModalで出る→Formに情報入力する→確定ボタンを押す→Modalが閉じて変更がViewに反映される

「生理周期を入力」を押すとモーダルが出ます

範囲を選択すると元のカレンダーにも同じように（少しずれていますが、すぐ修正はできます）表示されます

TetsuFe commented 5 years ago

上のカレンダー画面の日付をタップすると日付ごとの情報を入力できるモーダルが開きます

TetsuFe commented 5 years ago

ここまででできたこと

[x] ボタン→モーダル経由での生理周期レンジ入力
- [ ] 状態の保存は行っていません（ページ遷移すると失われる）
[x] 日付単位での情報入力と保存（shared_preferenceを使ったローカル保存）
- [ ] 日付変数dateの渡し方が非常に汚いのでBLoCを使う必要あり（showCalendarInputModal(BuildContext context, DateTime date)を起点に、バケツリレーが４段階くらい発生している）
[x] shared_preferenceのテストを書いてみた

できていないこと

[ ] BLoCを使った状態管理
[ ] レンジ入力の状態管理
[ ] モーダルを使わないレンジ入力
[ ] その他細かいレイアウトエラーの解消・フォームの小数点表示など（体温36.5℃のような使い方）

satudora-dev / bloc_sample