各言語でカレンダー作成

きっかけ

• Flutterを利用してクロスプラットフォームなアプリ開発。カレンダーを描画したい。
• カレンダー画面の作成は一苦労。
  • 当該月の始まりと終わりの日にち
  • 週の始まりは日曜なのか月曜なのか
  • 週の中に先月の日付や来月の日付が含まれる場合はどうするか。
• ライブラリやパッケージを駆使するのも良いが、デザインの縛りがあったりでカスタマイズがしずらい。
• 後々、様々な言語でカレンダー画面を作成する可能性がある為、それぞれの言語へ翻訳しておきたい。

コーディング開始

Flutterバージョン

1. データ生成だけを行うクラスを作成

月を指定して上記の一苦労ポイントを抑えて日にちのリストを生成する。

githubにて全てのコードを確認できます。

calendar_generator.dart

//...前略
// 週の始まりが日曜日と月曜日のどちらかは、利用する親Widgetで指定する
late bool startFromMonday;

// 指定する日付を引数に、その日付の属する1ヶ月分の日付をリストで返す
List<List<int?>> build(DateTime date){
    // some codes
}
//...後略

2023年8月の場合↓

CONSOLE

[[30, 31, 1, 2, 3, 4, 5],
 [6, 7, 8, 9, 10, 11, 12],
 [13, 14, 15, 16, 17, 18, 19],
 [20, 21, 22, 23, 24, 25, 26],
 [27, 28, 29, 30, 31, 1, 2]]

2. 生成されたデータを描画するWidgetを作成

完成イメージ

描画のアプローチ

• 数値のリスト（2次元配列）の構成： List<List<int?>>

  • 1週間分の7つの数値
    • 前月の日を含む週
    • 含まない週
    • 翌月の日を含む週

• 配列内の一つの配列を横に並べて、翌月の日を含む週の配列まで縦に並べて行く。

• 後はStack、ColumnやTableウィジェットを使ってレイアウトする。

大まかなWidget Tree

`MainApp`
v MainApp
  v Scaffold
    v Column
      v Container
        v CalendarWidget // ここから`calendar_widget`
          v Container
            v Stack
              - Text
            v Column
              v Table
                - Text
                ...
              v Table
                v Padding
                  - Text
                ...

TypeScriptバージョン

翻訳作業中

---

更新履歴

No.	日付	内容
2	2023/8/24	Flutterコーディングの各項目に詳しい思考過程を追記
1	2023/8/15	初稿