[Flutter]スケジュールを表示するには？

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

Flutterでスケジュールを表示する方法を紹介します。

方法

スケージュールを表示するには、「syncfusion_flutter_calendar」パッケージの「SfCalendarウェジェット」を使います。

パッケージ導入

まず、パッケージを導入します。

「pubspec.yamlファイル」で、次のコードを追加してください。

dependencies:
  syncfusion_flutter_calendar: ^19.2.62

パッケージのバージョンについては、皆さんの環境に合わせてください。

コードを追加したら「pub get」します。

インポート

次に、スケジュールを表示するファイルで、パッケージをインポートします。

import 'package:syncfusion_flutter_calendar/calendar.dart';

スケジュールを表示

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: SfCalendar(
      view: CalendarView.schedule,
      dataSource: EventDataSource(_getDataSource()),
    )));
  }

最後に、必要な場所で、SfCalendarウェジェットを配置します。

「SfCalendarウェジェット」の引数「view」では、表示スタイルを変更できます。

「CalendarView.schedule」を指定すると、週ごとのスケジュールが表示されます。

予定やイベントなどを表示するには、「dataSouce引数」で登録する必要があります。