すらぼうの開発ノート

モバイルアプリエンジニアのメモ

トップ > flutter > 【Flutter】table_calendarの使用方法

【Flutter】table_calendarの使用方法

flutter

本記事はZennにてリライトしました。

zenn.dev

本エントリではtable_calendarパッケージを用いたカレンダーの作成方法を説明する。

table_calendarとは

Flutterアプリで月単位、2週間単位、1週間単位のカレンダーを作成するためのサードパーティパッケージ。

pub.dev

デフォルトは以下のようなデザイン。カスタマイズも可能。

calendar

インストール

通常のパッケージ同様pubspec.yamlにパッケージ名を記述する。

dependencies:
  table_calendar: ^3.0.7

主なプロパティ

table_calendarを使用する際に使う主なプロパティを説明する。 すべてTableCalendarウィジェットのプロパティ。

focusedDay

表示するカレンダーの位置を指定するためのDateTime型プロパティ。 focusedDayが含まれる範囲のカレンダーが表示される。

例えばカレンダーのフォーマットを月単位に設定した場合を考える。 現在が9月1日だとするとカレンダーはsetStateが呼ばれた際に 常に9月のカレンダーになる。

firstDay

カレンダーが始まる日付を指定するDateTime型プロパティ。

lastDay

カレンダーが終わる日付を指定するDateTime型プロパティ。

calendarFormat

カレンダーのフォーマットを指定するCalendarFormat型プロパティ。 フォーマットは

  • 月単位
  • 2週間単位
  • 1週間単位

から選択する。

onFormatChanged

table_calendarが作成するカレンダーにはフォーマットを変更するボタンがデフォルトで表示される。

calendar format selector

onFormatChangedはこのボタンを触った際の挙動を指定するイベントハンドラ。

引数には後述のavailableCalendarFormatsで指定したフォーマットに含まれる CalendarFormatインスタンスが渡される。

典型的なonFormatChangedの使用方法は、フォーマットを変更するボタンがタップされたら 引数に渡されるフォーマットにsetStateを用いてカレンダーのフォーマットを変更すること。

availableCalendarFormats

選択可能なカレンダーのフォーマットをMap型のデータで指定する。 例えば次のように実装する。

availableCalendarFormats: {
  CalendarFormat.month: "Month",
  CalendarFormat.twoWeeks: "2 weeks",
  CalendarFormat.week: "Week",
},

Mapの各バリューに指定された文字列がボタンに表示される。

onDaySelected

カレンダー上の特定の日付をタップした際の挙動を指定するイベントハンドラ。 引数にはDateTime型でselectedDay, focusedDayが渡される。

典型的な使用方法は、選択された日付によってカレンダーのUIを更新するために setStateでローカルのマークを表示する日付とカレンダーが表示される日付（focusedDay） に該当する変数を更新する。

selectedDayPredicate

カレンダーをタップした際、マークを移動するために設定が必要なプロパティ。 基本的には以下の公式サイトに記載されている通り実装する。 本エントリでも公式サイトの記述を踏襲して以降の説明を行う。

pub.dev

パターン別カレンダー作成方法

table_calendarは、基本的にStatefulWidget内で使うことが多い。 なので本章でもCalendarComponentというStatefulWidget内に記述する。

月単位のみ表示するカレンダー

見た目

月単位のカレンダー

ソースコード

解説

availableCalendarFormatsを月単位に対応するCalendarFormat.monthキーのみを指定することでその他のフォーマットを表示しない設定にしている。

2週間、1週間単位のみのカレンダーを作成したい場合、_formatとavailableCalendarFormatsをそれぞれ以下のように指定すれば良い。

2週間単位のみの場合

CalendarFormat _format = CalendarFormat.twoWeeks;

availableCalendarFormats: {
  CalendarFormat.twoWeeks: "2 weeks",
},

カレンダーの見た目は次のようになる。

２週間単位のカレンダー

1週間単位のみの場合

CalendarFormat _format = CalendarFormat.week;

availableCalendarFormats: {
  CalendarFormat.twoWeeks: "Week",
},

カレンダーの見た目は次のようになる。

1週間単位のカレンダー

また_focusedDayの初期値をDateTime.now()に設定しているので、カレンダーがビルドされた時には当日を含んだ月が表示されている。もしビルド時に表示したいカレンダー位置がある場合は、_focusedDayの初期値を所望の値に指定すればよい。

言語対応（ローカライズ）

table_calendarでは曜日などのローカライズに対応している。 方法は公式サイトに記載されている通り実装すれば良い。

pub.dev

日本語の場合、TableCalendarウィジェットのlocaleプロパティに渡す文字列が'ja_JP'になる。

ランキング参加中
プログラミング