[Flutter]「CalendarController（カレンダーコントローラ）」の使い方

どうも、ちょげ(@chogetarou)です。

この記事では、CalendarControllerの使い方を解説します。

使い方

使い方

設定

「CalendarController」を使うには、まずインスタンスを変数に格納します。

var calendarController = CalendarController();

次に、SfCalendarウェジェットの「controller引数」に、用意した変数を指定します。

SfCalendar(
    controller: calendarController,
)

「controller引数」に指定したコントローラへの操作が、SfCalednarに反映されるようになります。

操作

「controller引数」に指定したコントローラを、必要な場所で操作します。

「CalendarController」での操作は、次の３つのプロパティで行います。

view : SfCalendarの表示スタイを変更
selectedDate : 選択する日付
displayDate : 表示する日付（CalendarView.month以外）

３つのプロパティの値を変えると、SfCalendarが変化します。

また、次の２つのメソッドで操作することもできます。

forward : 次の月へ
backward : 前の月へ

使用例

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        height: 600,
        child: SfCalendar(
          view: CalendarView.month,
          controller: calendarController,
        ),
      ),
      Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        IconButton(
            onPressed: () {
　　　　　　　　　　　　　//前の月へ
              calendarController.backward!();
            },
            icon: Icon(Icons.arrow_back)),
        TextButton(
            onPressed: () {
　　　　　　　　　　　　　　//カレンダーの切り替え
              if (calendarController.view == CalendarView.month) {
　　　　　　　　　　　　　　//カレンダーの表示を「day」に変更
                calendarController.view = CalendarView.day;
              } else {
　　　　　　　　　　　　　　　////カレンダーの表示を「month」に変更
                calendarController.view = CalendarView.month;
              }
            },
            child: const Text("Change View")),
        IconButton(
            onPressed: () {
             //次の月へ
              calendarController.forward!();
            },
            icon: Icon(Icons.arrow_forward))
      ])
    ]);
  }