【Flutter/Dart開発】カレンダーで利用開始・終了日を導入→固定費を表現した話【スマホアプリ】

カレンダー機能の導入について
機能一覧
- 固定費を登録してどうなるか
実際のソース

こんにちは、たちつてとです。

自作の出費記録アプリを(一人で)使ってて、

アマプラなど、月ごとに固定額が出ていくのを

わざわざ毎月やるのもアホらし。と思い、

アプリ側で固定費の入力画面を作成しました。

カレンダー機能の導入について

なお、カレンダの導入については

がっつり

【Dart/Flutter開発】画面遷移とカレンダー機能を実装、実際の(自作)アプリと考え方を共に...

こちらの記事で書きました。今回の記事では述べません。

カレンダ導入でいらっしゃった方はこちらへどうぞ。

機能一覧

以下の様な画面です。

f:id:tachitutetoNosuke:20211105193833p:plain

固定費の一覧があって、それぞれのTextを編集できる。
Text以外のところをタップすると、

アニメーションで適用日を編集する行に変わる
適用日は外部パッケージで、便利に？選択できる

固定費を登録してどうなるか

こうなります。今回やりたいことです。

f:id:tachitutetoNosuke:20211105200308p:plain

一番右の画像のように、月毎の出費合計を

出すところがあるのですが、

そこに自動的に固定費の金額を足します。

画像の様に、固定費で500円

固定費でない通常の入力で1000円

合わせて1500円という表示になります。

画像では緑の枠の項目に

2022/03/09, 2999/12/31とあります。

一方、一番右は2021年11月の表示ですが、

2022/03/09〜 2999/12/31の範囲にはありませんから

合計には入っていないという具合です。

これを利用開始・終了日と勝手に読んでいます。

実際のソース

クラス

@HiveType(typeId: 2)
class RegularCost{
  RegularCost({
    this.id = -1,
    this.categoryCd = -1
    , this.name = ''
    , this.money = 0
    , this.memo=''
    , this.dateFrom = "2021-01-01"//利用開始日デフォルト
    , this.dateTo = "2999-12-31"//利用終了日デフォルト
  });

  @HiveField(0)
  final int id;
  @HiveField(1)
  final int categoryCd;
  @HiveField(2)
  String name;
  @HiveField(3)
  int money;
  @HiveField(4)
  String memo;
  @HiveField(5)
  String dateFrom;//利用開始日
  @HiveField(6)
  String dateTo;//利用終了日
}

Hiveむにゃむにゃ、は気にしないでください。

スマホのストレージにデータを保存するのに

Hiveというパッケージを見つけたって感じです。

【Dart/Flutter開発】ローカルのストレージでデータ記録/管理できるHiveについてまとめた話【個人開発】

一応こちらでまとめています。

ともかく、クラスに利用日のフィールドを設定。

陽に設定されない時は、「ずっと」という意味で

2021/01/01〜2999/12/31とした。

ただし、問題は後者の2999年なんです...

_showDatePickerの注意点

多分、↑の方であげた過去記事も似たようなソースを

書いていると思うんですが

final DateTime? selected = await showDatePicker(
  context: context,
  initialDate: 初期値,
  firstDate: DateTime(2021),
  lastDate: DateTime(2999,12,31),//ここです
);

lastDateも利用終了日のデフォに合わせないと、

エラーが吐かれます。

つまり、firstDate〜lastDateの範囲外で

入力/表示したいDateを無理やり表示させることはできない

です。

例)

○良い例

initailDate 2021/05/01
firstDate 2020/07/05
lastDate 2026/07/05

×悪い例

initailDate 2021/05/01
firstDate 2021/07/05
lastDate 2022/07/05

まあそれはそれで結構なんですが...

f:id:tachitutetoNosuke:20211105204224p:plain

いや2999年は編集したいわって時、

年を変えようとすると、この画像みたいになります。

いつなったら2020年代に来るんや...

という注意でした。

まあ、デフォの値を2022/01/01とかにすれば

OKな話です。

固定費の抽出

Hive.openBox<RegularCost>(_cost).then((value) {
  Box<RegularCost> mesBox = value;

  for (RegularCost cost in mesBox.values) {// 固定費ループ
    if(DateTime(int.parse(_year), int.parse(_month),1).isAfter(DateTime.parse(cost.dateFrom))
    && DateTime(int.parse(_year), int.parse(_month),1).isBefore(DateTime.parse(cost.dateTo))
    )// 利用日判定
      _sum += cost.money;
  }
});