[Flutter]「カレンダー(calendar)」を表示する方法

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

Flutterでカレンダーを表示する方法を紹介します。

方法

カレンダーを表示するには、「syncfusion_flutter_calendar」パッケージを使います。

ここからは具体的な実装の流れを説明します。

1 . パッケージ導入

まず、パッケージを使うために、「pubspec.yamlファイル」に、次のコードを追加します。

dependencies:
  syncfusion_flutter_calendar: ^19.2.62

「^19.2.62」の部分は、使いたいバージョンを指定してください。

追加したら、「flutter pub get」コマンドを、ターミナルで実行します。

＄ flutter pub get

2 . インポート

カレンダーを表示するファイルで、パッケージををインポートします。

import 'package:syncfusion_flutter_calendar/calendar.dart';

3 . カレンダーの表示

カレンダーを表示するには、「SfCalendarウェジェット」を使います。

このウェジェットは、「syncfusion_flutter_calendar」パッケージによって使えるようになります。

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      　　　　　child: SfCalendar(),
    　　　)
　　　);
}

上記は、「Containerウェジェット」の子ウェジェットとして表示しています。

通常では、時刻表のようなものが表示されます。

SfCalendarは、「view」引数で表示スタイルを変更することが出来ます。

カレンダーを表示するには、「view引数」に「CalendarView.month」を指定します。

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: Container(
      　　　　child: SfCalendar(
        　　　　　view: CalendarView.month,
      　　　　),
    　　)
　　　);
}

「CalendarView.month」を、SfCalendarウェジェットの「view引数」に指定します。

そうすることで、カレンダーを表示することが出来ます。

まとめ

カレンダーを表示するには、「syncfusion_flutter_calendar」パッケージを使います。

このパッケージの「SfCalendarウェジェット」で、カレンダーを表示することが出来ます。

Getting started with Flutter Event Calendar widget | Syncfusion

Learn here about getting started with Syncfusion Event Calendar (SfCalendar) widget, its elements, and more.

help.syncfusion.com