月謝袋の見直し2

目次

先生側のレッスン日入力機能

  • 既存画面タブ追加
    タブ1: 月謝スタンプ(既存機能)
    タブ2: レッスン日管理(新機能)
  • レッスン日の追加・編集・削除機能
    生徒選択(ドロップダウン)
    日付選択(カレンダー)・・日付をタップしてカレンダーから選択
    時間選択(時刻ピッカー)・・時間をタップして時刻を選択
    レッスン日の追加・・「レッスン日を追加」ボタン
    レッスン一覧表示・・下にレッスン一覧が表示される
    レッスン日の削除・・削除ボタン(ゴミ箱アイコン)で削除可能
  • 日付と時間の設定

生徒側

  • 月謝袋の黒背景エリアにレッスン情報が自動表示される
  • 例: 「レッスン 6回」「4/7,9,18,21,22,25」

レッスン日記録機能の実装

Screenshot

レッスン回数とレッスン日の詳細(4/7, 4/14など)を表示させることにしました。
⚫︎レッスン日を先生と生徒で共有(レッスン日の認識の違いを減らす)
 レッスン日の変更などが急に電話で口約束になったりなどもあると思うので、
 先生と生徒で聞き間違い、思い込み違いなどのミスを防げる
⚫︎レッスン回数表示があれば、回数で月謝の金額が変わる教室もあるだろうから
 回数が先生と生徒で目に見えた形で「回数」の共有できると思ったからです。

Firebaseコンソールでインデックスを作成

1)レッスン一覧となっていますが、そこの部分にエラーが表示されました

2)エラーメッセージのURL(https://console.firebase.google.com/…)をコピー
ブラウザで開く
Firebaseにログイン
「インデックスを作成」ボタンをクリック
数分待つ(インデックス作成中)
完了したらアプリを再起動

カレンダーの表示を日本語

  • アプリ全体の設定を日本語に。メインファイル(main.dart)を修正
    アプリ全体のlocale設定を変更

期待される動作
カレンダー表示(DatePicker):

変更前: December, January, February…
変更後: 12月, 1月, 2月…

時刻ピッカー(TimePicker):

変更前: AM/PM
変更後: 午前/午後

曜日表示:

変更前: Mon, Tue, Wed…
変更後: 月, 火, 水…

UI:「月謝スタンプ」と「レッスン日管理」のタブをわかりやすく

ネイビー背景(#1A237E)
白テキスト
選択中のタブは太字
インジケーター(下線)は赤
ホバー効果追加(マウスをかざすと薄い白)
タップ時の効果も追加

リアルタイム反映

  • 先生がレッスン日を追加すると、生徒側の画面に即座に反映、StreamBuilderを使用
  • プルトゥリフレッシュ、上から下にスワイプすると画面が再読み込みされるようにする。
    RefreshIndicatorを追加

Androidランチャーアイコンの余白(パディング)修正

iPhoneでは綺麗なのに、Androidでは余白がない問題
Androidランチャーアイコンの余白修正 – 65%縮小で最適化

Screenshot
目次