Flutterでカレンダーを作成する

カレンダー

Flutterで簡単なカレンダーを作成します。

今回の手順は以下のとおりです。

フローチャート

今回作成するカレンダーのフローチャートです。

カレンダーのフローチャート

初期値設定

カレンダーに関係する初期値や変数を設定します。

今日

今日(現在日時)を取得して変数に格納します。日付を扱うためDateTimeクラスを使います。

    
// 現在日時
DateTime today = DateTime.now();
    
  

DateTime.now()を使って現在日時を取得します。

月の最初の日

月の最初の日を取得し変数に格納します。年月日の日を1日に設定することで月の最初の日を取得することができます。

    
// 月の最初の日
DateTime firstDayOfMonth = DateTime(today.year, today.month, 1);
    
  

月の最後の日

月の最後の日を取得し変数に格納します。年月日の月をプラス1日、日を1日に設定すること翌月の最初の日になります。その日の前日で-1日を設定することで月末を取得することができます。

    
// 月の最後の日
DateTime lastDayOfMonth = DateTime(today.year, today.month + 1, 1).add(const Duration(days: -1));
    
  

月の最初の日の曜日

月の最初の日の曜日を取得し変数に格納します。weekdayプロパティで取得できます。曜日は1,2,3,...と整数で返却されます。1が月曜日、2が火曜日・・7が日曜日です。

    
// 月の最初の日の曜日
int firstDayOfWeek = firstDayOfMonth.weekday;
    
  

月の最後の日の日

月の最後の日の日を取得し変数に格納します。ここで、月の最後の日の日とは、2022/08/31であれば、31の整数のことです。

    
// 月の最初の日の曜日
int lastDays = lastDayOfMonth.day;
    
  

日のリスト

日のリストを設定します。日のリストは、月、火、水・・・日までの部品を格納するリストです。

    
// 日のリスト
List<Widget> dayList = [];
    
  

週のリスト

週のリストを設定します。週のリストは、日のリストを格納するリストです。

    
// 週のリスト
List<Widget> weekList = [];
    
  

日の繰返し

月の最初の日から、月の最後の日まで繰り返します。

繰返しは、For文を使います。インクリメントの変数はincDayとします。

月の最初の日は必ず1日から始まるので、1を設定します。

繰返しの最大数は、月の最後の日の日を設定します。

    
for (int incDay = 1; incDay <= lastDays; incDay++) {
・・・略・・・
}
    
  

初週の補完

月の最初の日は必ず月曜日から始まるとは限りません。今回は、カレンダーは一番左から表示するために、月の最初の日の曜日に一致するまでデータを保管します。

初週の補完の条件

初週の補完の条件は、①1日であること、かつ、②月の最初の日の曜日が1月曜日でないことです。

    
if (incDay == 1 && firstDayOfWeek != 1) {
・・・略・・・
}
  
  

補完数繰り返し

補完する日数分繰り返しをおこないます。

週の最初の曜日1から、月の最初の日の曜日の前日の曜日までを繰り返します。

繰返しは、For文を使います。インクリメントの変数はincFistWeekとします。

    
for (int incFistWeek = 1; incFistWeek < firstDayOfWeek; incFistWeek++) {
・・・略・・・
}
  
  

補完データの作成

補完するデータを作成します。

補完するデータは部品(Widget)です。

作成した部品は、日のリストに追加します。

    
dayList.add(
  Expanded(
    child: Container(
      height: double.infinity,
      color: Colors.cyan,
      child: const Text('-'),
    ),
  ),
);
  
  

カレンダーデータの作成

カレンダーのデータを作成します。

テキストに出力する日は、incDayを文字に型変換(cast)をして設定します。

作成した部品は、日のリストに追加します。

    
dayList.add(
  Expanded(
    child: Container(
      height: double.infinity,
      color: Colors.cyan,
      child: Text(incDay.toString()),
    ),
  ),
);
  
  

終週補完

月の最終がグリッドの列に足りない場合にデータを保管します。

終週の補完の条件

終週の補完の条件は、①月の最後の日の日であること、かつ、②日のリストのデータ要素が7でないことです。

    
if (incDay == lastDays  && dayList.length != 7) {
・・・略・・・
}
  
  

補完数繰り返し

補完する日数分繰り返しをおこないます。

日のリストのデータ要素から足りない分の要素を繰り返します。

繰返しは、For文を使います。インクリメントの変数はincLastWeekとします。

    
for (int incLastWeek = dayList.length + 1; incLastWeek <= 7; incLastWeek++) {
・・・略・・・
}
  
  

補完データの作成

補完するデータを作成します。

補完するデータは部品(Widget)です。

作成した部品は、日のリストに追加します。

    
dayList.add(
  Expanded(
    child: Container(
      height: double.infinity,
      color: Colors.cyan,
      child: const Text('-'),
    ),
  ),
);
  
  

週の配列格納

日のリストを週の配列に格納します。

条件は日のリストの要素が7のときに週のリストに格納します。

格納後は日のリストの配列を初期化します。

    
if (dayList.length == 7) {
  weekList.add(
    Expanded(
      child: Row(
        children: dayList,
      ),
    ),
  );
  dayList = [];
}
  
  

画面確認

画面を表示して確認します。

まとめ

Flutterで簡単なカレンダーを作成しました。

参考になれば幸いです。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。