どうも、ちょげ(@chogetarou)です。
SfCalendarをコード上でコントロールできるようにするには、どうしたらいいのでしょうか？
方法
class Sample extends StatefulWidget {
@override
_SampleState createState() => _SampleState();
}
class _SampleState extends State<Sample> {
final calendarController = CalendarController();
@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) {
calendarController.view = CalendarView.day;
} else {
calendarController.view = CalendarView.month;
}
},
child: const Text("Change View")),
IconButton(
onPressed: () {
calendarController.forward!();
},
icon: Icon(Icons.arrow_forward))
])
]);
}SfCalendarを操作するには、まず「CalendarController」を用意します。
final calendarController = CalendarController();CalendarControllerは、SfCalendarを操作するためのクラスです。
SfCalendarを操作できるようにするには、SfCalendarの「controller引数」に、「CalendarController」を指定します。
SfCalendar(
view: CalendarView.month,
controller: calendarController,
)そして、操作したい場所で、指定した「CalendarControllerクラス」のプロパティを変更、もしくはメソッドを呼び出します。
//表示スタイルの変更
calendarController.view = CalendarView.month;
//次の月へ
calendarController.forward!();
//前の月へ
calendarController.backward!();
コメント