[Flutter]２つの月(month)をカレンダー(calendar)で表示するには？

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

SfCalendarで表示するカレンダーは、１つの画面に１つの月を表示します。

もし、１つの画面に２つの月を表示するには、どうしたらいいのでしょうか？

方法

方法

インポート

まず、２つのパッケージをインポートします。

import 'package:syncfusion_flutter_calendar/calendar.dart';
import 'package:flutter/scheduler.dart';

コントローラと関数の用意

カレンダーに使う２つのコントローラと関数を用意します。

  CalendarController _calendarController1 = CalendarController();
  CalendarController _calendarController2 = CalendarController();

  //カレンダー１を変更した時にカレンダー2を変更する
  void calendar1ViewChanged(ViewChangedDetails viewChangedDetails) {
    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
      _calendarController2.displayDate = DateTime(
          _calendarController1.displayDate!.year,
          _calendarController1.displayDate!.month + 1,
          _calendarController1.displayDate!.day);
    });
  }

 //カレンダー2を変更したときにカレンダー1を変更
  void calendar2ViewChanged(ViewChangedDetails viewChangedDetails) {
    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
      _calendarController1.displayDate = DateTime(
          _calendarController2.displayDate!.year,
          _calendarController2.displayDate!.month - 1,
          _calendarController2.displayDate!.day);
    });
  }

用意した変数は、カレンダーを操作するためのものです。

関数は、別々のカレンダーを連動させるためのものです。

カレンダーを表示

最後に、カレンダーを表示します。

２つのカレンダーは、「Columnウェジェット」を使い並べて表示します。

@override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          SfCalendar(
            view: CalendarView.month,
            controller: _calendarController1,
            monthViewSettings: MonthViewSettings(
              navigationDirection: MonthNavigationDirection.vertical,
            ),
            onViewChanged: calendar1ViewChanged,
          ),
          SfCalendar(
            view: CalendarView.month,
            controller: _calendarController2,
            viewHeaderHeight: 0,
            monthViewSettings: MonthViewSettings(
                navigationDirection: MonthNavigationDirection.vertical),
            onViewChanged: calendar2ViewChanged,
          ),
        ],
      ),
    );
  }

２つののカレンダーには、連動するために用意したコントローラと関数を渡します。

これで２つのカレンダーを表示できるようになります。