ホーム / Flutter /

FlutterのTableCalendar: プロパティとメソッドの使い方まとめ

2024年6月3日月曜日

Flutter

t f B! P L

FlutterのTableCalendarは、カレンダー表示を簡単に実装できる便利なウィジェットです。この記事では、TableCalendarの主要なプロパティとメソッドについて、公式APIレファレンスを基に具体的な設定例と使用シチュエーションを解説します。

プロパティ

availableCalendarFormats

  • 概要: 使用可能なカレンダーフォーマットとそれに対応する名前のマップ。
  • 型: Map<CalendarFormat, String>
  • 設定例:
  availableCalendarFormats: const {
    CalendarFormat.month: 'Month',
    CalendarFormat.twoWeeks: '2 weeks',
    CalendarFormat.week: 'Week',
  }
  • 使用シチュエーション: カレンダーの表示形式をユーザーが変更できるようにしたいときに使用します。

availableGestures

  • 概要: TableCalendarで使用可能なスワイプジェスチャーを指定。
  • 型: AvailableGestures
  • 設定例:
  availableGestures: AvailableGestures.all,
  • 使用シチュエーション: ユーザーがスワイプでカレンダーを操作できるようにしたいときに使用します。

calendarBuilders

  • 概要: TableCalendarで使用するカスタムビルダーのセット。
  • 型: CalendarBuilders<T>
  • 設定例:
  calendarBuilders: CalendarBuilders(
    selectedBuilder: (context, date, events) => Container(
      margin: const EdgeInsets.all(4.0),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Text(
        '${date.day}',
        style: TextStyle().copyWith(fontSize: 16.0),
      ),
    ),
  ),
  • 使用シチュエーション: カレンダーのUIをカスタマイズしたいときに使用します。

calendarFormat

  • 概要: TableCalendarの現在のフォーマットを指定。
  • 型: CalendarFormat
  • 設定例:
  calendarFormat: CalendarFormat.month,
  • 使用シチュエーション: カレンダーの初期表示形式を設定したいときに使用します。

calendarStyle

  • 概要: TableCalendarの内容のスタイルを指定。
  • 型: CalendarStyle
  • 設定例:
  calendarStyle: CalendarStyle(
    todayDecoration: BoxDecoration(
      color: Colors.orange,
      shape: BoxShape.circle,
    ),
    selectedDecoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),
  ),
  • 使用シチュエーション: カレンダーの日付セルのスタイルをカスタマイズしたいときに使用します。

currentDay

  • 概要: 今日として扱われるDateTime。
  • 型: DateTime?
  • デフォルト: DateTime.now()
  • 設定例:
  currentDay: DateTime(2022, 12, 25),
  • 使用シチュエーション: 特定の日付を「今日」として扱いたいときに使用します。

dayHitTestBehavior

  • 概要: 各日セルのHitTestBehaviorを指定。
  • 型: HitTestBehavior
  • 設定例:
  dayHitTestBehavior: HitTestBehavior.translucent,
  • 使用シチュエーション: 日セルのヒットテストの挙動を調整したいときに使用します。

daysOfWeekHeight

  • 概要: 週の日の行の高さを設定。
  • 型: double
  • 設定例:
  daysOfWeekHeight: 40.0,
  • 使用シチュエーション: 週の日の表示行の高さを調整したいときに使用します。

daysOfWeekStyle

  • 概要: 週の日のスタイルを指定。
  • 型: DaysOfWeekStyle
  • 設定例:
  daysOfWeekStyle: DaysOfWeekStyle(
    weekendStyle: TextStyle().copyWith(color: Colors.red),
  ),
  • 使用シチュエーション: 週の日の表示スタイルをカスタマイズしたいときに使用します。

daysOfWeekVisible

  • 概要: 週の日の行の表示を決定。
  • 型: bool
  • 設定例:
  daysOfWeekVisible: true,
  • 使用シチュエーション: 週の日の行を表示するかどうかを決定したいときに使用します。

enabledDayPredicate

  • 概要: 指定された日が有効かどうかを決定する関数。
  • 型: bool Function(DateTime day)?
  • 設定例:
  enabledDayPredicate: (date) => date.isAfter(DateTime.now().subtract(Duration(days: 1))),
  • 使用シチュエーション: 有効/無効の日付を条件付きで指定したいときに使用します。

eventLoader

  • 概要: 指定された日にイベントのリストを割り当てる関数。
  • 型: List<T> Function(DateTime day)?
  • 設定例:
  eventLoader: (day) {
    return day.weekday == DateTime.monday ? ['Event 1'] : [];
  },
  • 使用シチュエーション: 各日に関連するイベントをロードしたいときに使用します。

firstDay

  • 概要: TableCalendarの最初の有効な日。
  • 型: DateTime
  • 設定例:
  firstDay: DateTime.utc(2020, 1, 1),
  • 使用シチュエーション: カレンダーの開始日を設定したいときに使用します。

focusedDay

  • 概要: 現在表示されている日を決定。
  • 型: DateTime
  • 設定例:
  focusedDay: DateTime.now(),
  • 使用シチュエーション: カレンダーの初期表示日を設定したいときに使用します。

formatAnimationCurve

  • 概要: カレンダーフォーマットが変更されるときのアニメーションカーブを指定。
  • 型: Curve
  • 設定例:
  formatAnimationCurve: Curves.easeInOut,
  • 使用シチュエーション: フォーマット変更時のアニメーションカーブをカスタマイズしたいときに使用します。

formatAnimationDuration

  • 概要: カレンダーフォーマットが変更されるときのアニメーションの期間を指定。
  • 型: Duration
  • 設定例:
  formatAnimationDuration: Duration(milliseconds: 500),
  • 使用シチュエーション: フォーマット変更時のアニメーションの期間をカスタマイズしたいときに使用します。

headerStyle

  • 概要: TableCalendarのヘッダーのスタイルを指定。
  • 型: HeaderStyle
  • 設定例:
  headerStyle: HeaderStyle(
    formatButtonVisible: false,
  ),
  • 使用シチュエーション: カレンダーのヘッダーの見た目をカスタマイズしたいときに使用します。

headerVisible

  • 概要: カレンダーのヘッダーの表示を決定。
  • 型: bool
  • 設定例:
  headerVisible: true,
  • 使用シチュエーション: カレンダーのヘッダーを表示するかどうかを決定したいときに使用します。

holidayPredicate

  • 概要: 指定された日が休日かどうかを決定する関数。
  • 型: bool Function(DateTime day)?
  • 設定例:
  holidayPredicate: (date) => date.weekday == DateTime.saturday || date.weekday == DateTime.sunday,
  • 使用シチュエーション: 休日を特定したいときに使用します。

lastDay

  • 概要: TableCalendarの最後の有効な日。
  • 型: DateTime
  • 設定例:
  lastDay: DateTime.utc(2030, 12, 31),
  • 使用シチュエーション: カレンダー

の終了日を設定したいときに使用します。

locale

  • 概要: TableCalendarの日付をフォーマットするロケール。
  • 型: dynamic
  • 設定例:
  locale: 'ja_JP',
  • 使用シチュエーション: カレンダーの日付フォーマットを特定のロケールに合わせたいときに使用します。

onCalendarCreated

  • 概要: カレンダーが作成されたときに呼び出される関数。
  • 型: void Function(PageController pageController)?
  • 設定例:
  onCalendarCreated: (controller) {
    print('Calendar created');
  },
  • 使用シチュエーション: カレンダー作成時に特定の処理を実行したいときに使用します。

onDayLongPressed

  • 概要: 任意の日が長押しされたときに呼び出される関数。
  • 型: OnDaySelected?
  • 設定例:
  onDayLongPressed: (date, events) {
    print('Long pressed: $date');
  },
  • 使用シチュエーション: 日を長押しした際に特定の処理を実行したいときに使用します。

onDaySelected

  • 概要: 任意の日がタップされたときに呼び出される関数。
  • 型: OnDaySelected?
  • 設定例:
  onDaySelected: (selectedDay, focusedDay) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });
  },
  • 使用シチュエーション: 日をタップした際に特定の処理を実行したいときに使用します。

onDisabledDayLongPressed

  • 概要: 無効な日が長押しされたときに呼び出される関数。
  • 型: void Function(DateTime day)?
  • 設定例:
  onDisabledDayLongPressed: (day) {
    print('Disabled day long pressed: $day');
  },
  • 使用シチュエーション: 無効な日を長押しした際に特定の処理を実行したいときに使用します。

onDisabledDayTapped

  • 概要: 無効な日がタップされたときに呼び出される関数。
  • 型: void Function(DateTime day)?
  • 設定例:
  onDisabledDayTapped: (day) {
    print('Disabled day tapped: $day');
  },
  • 使用シチュエーション: 無効な日をタップした際に特定の処理を実行したいときに使用します。

onFormatChanged

  • 概要: カレンダーフォーマットが変更されたときに呼び出される関数。
  • 型: void Function(CalendarFormat format)?
  • 設定例:
  onFormatChanged: (format) {
    print('Format changed to: $format');
  },
  • 使用シチュエーション: フォーマット変更時に特定の処理を実行したいときに使用します。

onHeaderLongPressed

  • 概要: ヘッダーが長押しされたときに呼び出される関数。
  • 型: void Function(DateTime focusedDay)?
  • 設定例:
  onHeaderLongPressed: (focusedDay) {
    print('Header long pressed');
  },
  • 使用シチュエーション: ヘッダーを長押しした際に特定の処理を実行したいときに使用します。

onHeaderTapped

  • 概要: ヘッダーがタップされたときに呼び出される関数。
  • 型: void Function(DateTime focusedDay)?
  • 設定例:
  onHeaderTapped: (focusedDay) {
    print('Header tapped');
  },
  • 使用シチュエーション: ヘッダーをタップした際に特定の処理を実行したいときに使用します。

onPageChanged

  • 概要: 現在表示されているカレンダーページが変更されたときに呼び出される関数。
  • 型: void Function(DateTime focusedDay)?
  • 設定例:
  onPageChanged: (focusedDay) {
    print('Page changed to: $focusedDay');
  },
  • 使用シチュエーション: ページ変更時に特定の処理を実行したいときに使用します。

onRangeSelected

  • 概要: 日範囲が選択されたときに呼び出される関数。
  • 型: OnRangeSelected?
  • 設定例:
  onRangeSelected: (start, end, focusedDay) {
    print('Range selected: $start - $end');
  },
  • 使用シチュエーション: 日範囲選択時に特定の処理を実行したいときに使用します。

pageAnimationCurve

  • 概要: 表示されているカレンダーページが変更されたときのスクロールアニメーションカーブを指定。
  • 型: Curve
  • 設定例:
  pageAnimationCurve: Curves.easeInOut,
  • 使用シチュエーション: ページ変更時のスクロールアニメーションのカーブをカスタマイズしたいときに使用します。

pageAnimationDuration

  • 概要: 表示されているカレンダーページが変更されたときのスクロールアニメーションの期間を指定。
  • 型: Duration
  • 設定例:
  pageAnimationDuration: Duration(milliseconds: 300),
  • 使用シチュエーション: ページ変更時のスクロールアニメーションの期間をカスタマイズしたいときに使用します。

pageAnimationEnabled

  • 概要: trueに設定すると、focusedDayが更新されるときにスクロールアニメーションを表示。
  • 型: bool
  • 設定例:
  pageAnimationEnabled: true,
  • 使用シチュエーション: フォーカスが変更された際にアニメーションを表示したいときに使用します。

pageJumpingEnabled

  • 概要: trueに設定すると、CalendarFormat.monthの外部日をタップしたときにその月のカレンダーページにジャンプします。
  • 型: bool
  • 設定例:
  pageJumpingEnabled: true,
  • 使用シチュエーション: 月の外部日をタップした際にその月のページにジャンプさせたいときに使用します。

rangeEndDay

  • 概要: 選択された日範囲の終了日。
  • 型: DateTime?
  • 設定例:
  rangeEndDay: DateTime.now().add(Duration(days: 7)),
  • 使用シチュエーション: 選択範囲の終了日を指定したいときに使用します。

rangeSelectionMode

  • 概要: 現在の範囲選択モード。
  • 型: RangeSelectionMode
  • 設定例:
  rangeSelectionMode: RangeSelectionMode.toggledOn,
  • 使用シチュエーション: 範囲選択モードを設定したいときに使用します。

rangeStartDay

  • 概要: 選択された日範囲の開始日。
  • 型: DateTime?
  • 設定例:
  rangeStartDay: DateTime.now(),
  • 使用シチュエーション: 選択範囲の開始日を指定したいときに使用します。

rowHeight

  • 概要: TableCalendarの行の高さを設定。
  • 型: double
  • 設定例:
  rowHeight: 50.0,
  • 使用シチュエーション: 行の高さを調整したいときに使用します。

selectedDayPredicate

  • 概要: 指定された日が選択されているかどうかを決定する関数。
  • 型: bool Function(DateTime day)?
  • 設定例:
  selectedDayPredicate: (date) => date.isSameDay(_selectedDay),
  • 使用シチュエーション: 選

択された日を条件付きで指定したいときに使用します。

shouldFillViewport

  • 概要: trueに設定すると、TableCalendarは利用可能な高さを埋めます。
  • 型: bool
  • 設定例:
  shouldFillViewport: true,
  • 使用シチュエーション: カレンダーが利用可能な高さを埋めるようにしたいときに使用します。

simpleSwipeConfig

  • 概要: 垂直スワイプ検出器の設定。
  • 型: SimpleSwipeConfig
  • 設定例:
  simpleSwipeConfig: SimpleSwipeConfig(
    verticalSwipeMinVelocity: 1000,
  ),
  • 使用シチュエーション: 垂直スワイプの挙動をカスタマイズしたいときに使用します。

sixWeekMonthsEnforced

  • 概要: trueに設定すると、CalendarFormat.monthは常に6週間を表示。
  • 型: bool
  • 設定例:
  sixWeekMonthsEnforced: true,
  • 使用シチュエーション: 月の表示形式を固定したいときに使用します。

startingDayOfWeek

  • 概要: TableCalendarの週の開始日を指定。
  • 型: StartingDayOfWeek
  • 設定例:
  startingDayOfWeek: StartingDayOfWeek.monday,
  • 使用シチュエーション: 週の開始日をカスタマイズしたいときに使用します。

weekendDays

  • 概要: 週末の日をリストで指定。
  • 型: List<int>
  • 設定例:
  weekendDays: [DateTime.saturday, DateTime.sunday],
  • 使用シチュエーション: 週末の日をカスタマイズしたいときに使用します。

weekNumbersVisible

  • 概要: カレンダーに週番号を表示するかどうか。
  • 型: bool
  • 設定例:
  weekNumbersVisible: true,
  • 使用シチュエーション: 週番号を表示したいときに使用します。

メソッド

createElement()

  • 概要: このウィジェットの位置を管理するStatefulElementを作成。
  • 型: StatefulElement
  • 使用シチュエーション: 内部で使用されるため、通常は直接使用しません。

createState()

  • 概要: ツリー内のこのウィジェットの位置に対する可変状態を作成。
  • 型: _TableCalendarState<T>
  • 使用シチュエーション: 内部で使用されるため、通常は直接使用しません。

debugDescribeChildren()

  • 概要: このノードの子ノードを記述するDiagnosticsNodeオブジェクトのリストを返します。
  • 型: List<DiagnosticsNode>
  • 使用シチュエーション: デバッグツールで使用されます。

debugFillProperties(DiagnosticPropertiesBuilder properties)

  • 概要: ノードに関連する追加のプロパティを追加。
  • 使用シチュエーション: デバッグツールで使用されます。

noSuchMethod(Invocation invocation)

  • 概要: 存在しないメソッドやプロパティにアクセスされたときに呼び出されます。
  • 使用シチュエーション: 通常は使用しません。

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style})

  • 概要: デバッグツールで使用されるオブジェクトのデバッグ表現を返します。
  • 型: DiagnosticsNode
  • 使用シチュエーション: デバッグツールで使用されます。

toString({DiagnosticLevel minLevel = DiagnosticLevel.info})

  • 概要: このオブジェクトの文字列表現。
  • 型: String
  • 使用シチュエーション: デバッグやログ出力に使用されます。

toStringDeep({String prefixLineOne = ‘’, String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug})

  • 概要: このノードとその子孫の文字列表現を返します。
  • 型: String
  • 使用シチュエーション: デバッグやログ出力に使用されます。

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug})

  • 概要: オブジェクトの詳細な1行の説明を返します。
  • 型: String
  • 使用シチュエーション: デバッグやログ出力に使用されます。

toStringShort()

  • 概要: このウィジェットの短いテキスト説明を返します。
  • 型: String
  • 使用シチュエーション: デバッグやログ出力に使用されます。

以上がFlutterのTableCalendarのプロパティとメソッドのAPI仕様解説です。各プロパティの設定例と使用シチュエーションを参考にして、効果的なカレンダーの実装に役立ててください。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ