【flutter】カレンダーを作る

こんにちは！
最近は、
昼間は暑く、夜は寒くて、何を着ればいいか迷ってしまいますね〜
今回は、flutterでカレンダーを実装していきます。

インポート

pubspec.yaml

environment:
  sdk: '>=3.0.6 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  table_calendar: ^3.0.9
  intl: ^0.18.1

packageをimportするために、pubspec.yamlに追記しましょう。
pub getを忘れずに！

コード

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

class Calender extends StatefulWidget {
  const Calender({super.key});

  @override
  State<Calender> createState() => _CalenderState();
}

class _CalenderState extends State<Calender> {
  final DateTime _focusedDay = DateTime.now();
  CalendarFormat _calendarFormat = CalendarFormat.month;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("カレンダー")),
      body: TableCalendar(
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2030, 12, 31),
        focusedDay: _focusedDay,
        calendarFormat: _calendarFormat,
        onFormatChanged: (format) {
          if (_calendarFormat != format) {
            setState(() {
              _calendarFormat = format;
            });
          }
        },
      ),
    );
  }
}

TableCalendarではfirstDay、lastDay、focusedDayが必須です。
firstDayとlastDayはカレンダーを表示する最初と最後の月の指定ができ、
focusedDayはデフォルトでフォーカスされて日付の部分に色が付きます。
また、CalendarFormatは月(month)、週(week)を選択できます。

実行例

最後に

ここまで読んでいただき、ありがとうございました！
いいねをくれると、スキップしながら喜びます