[flutter] 플러터를 사용하여 캘린더와의 연동 방법

04 Dec 2023

flutter

캘린더와의 연동은 애플리케이션에 이벤트를 추가하고 관리하는 데 매우 유용합니다. 플러터는 캘린더와의 연동을 쉽게 구현할 수 있는 다양한 패키지를 제공합니다. 이번 글에서는 table_calendar 패키지를 사용하여 캘린더와의 연동 방법을 알아보겠습니다.

1. 패키지 설치하기

먼저, pubspec.yaml 파일에 table_calendar 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^2.3.3

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다.

$ flutter pub get

2. 캘린더 위젯 추가하기

table_calendar 패키지를 사용하여 캘린더 위젯을 추가할 수 있습니다. 먼저, 해당 패키지를 import 합니다.

import 'package:table_calendar/table_calendar.dart';

그리고 캘린더 위젯을 생성하는 코드를 작성합니다.

TableCalendar(
  calendarController: _calendarController,
  startingDayOfWeek: StartingDayOfWeek.sunday,
  availableGestures: AvailableGestures.all,
  calendarStyle: CalendarStyle(
    todayColor: Colors.orange,
    selectedColor: Theme.of(context).primaryColor,
    todayStyle: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 18.0,
      color: Colors.white,
    ),
  ),
  onDaySelected: (date, events, holidays) {
    // 선택한 날짜에 해당하는 이벤트 처리 로직 추가
  },
),

위 코드에서 calendarController는 캘린더 컨트롤러를 설정하며, startingDayOfWeek는 캘린더 시작 요일을 설정합니다. availableGestures는 사용 가능한 제스처를 지정합니다. calendarStyle은 캘린더의 스타일을 설정합니다. onDaySelected는 날짜가 선택되었을 때 호출될 콜백 함수를 정의합니다.

3. 이벤트 추가하기

선택한 날짜에 해당하는 이벤트를 관리하기 위해 Map<DateTime, List<dynamic>> 형태의 데이터를 사용할 수 있습니다. 예를 들어, 다음과 같이 이벤트 데이터를 정의할 수 있습니다.

final Map<DateTime, List<dynamic>> _events = {
  DateTime(2022, 1, 1): ['New Year'],
  DateTime(2022, 1, 6): ['Epiphany'],
  DateTime(2022, 2, 14): ['Valentine\'s Day'],
  //...
};

위와 같이 이벤트 데이터를 정의한 후, onDaySelected 콜백 함수에서 해당 날짜에 맞는 이벤트를 가져와 처리할 수 있습니다.

onDaySelected: (date, events, holidays) {
  setState(() {
    _selectedEvents = events;
  });
},

위 코드에서 _selectedEvents는 선택된 날짜에 맞는 이벤트 리스트를 저장하는 변수입니다.

4. 캘린더에 이벤트 표시하기

마지막으로, 선택한 날짜에 해당하는 이벤트를 캘린더에 표시하는 방법을 알아보겠습니다. 캘린더 위젯에서 builders 속성을 사용하여 캘린더의 각 날짜에 커스텀 위젯을 표시할 수 있습니다.

TableCalendar(
  //...
  builders: CalendarBuilders(
    markersBuilder: (context, date, events, holidays) {
      final children = <Widget>[];

      if (events.isNotEmpty) {
        children.add(
          Positioned(
            right: 1,
            bottom: 1,
            child: _buildEventsMarker(date, events),
          ),
        );
      }

      if (holidays.isNotEmpty) {
        children.add(
          Positioned(
            left: 1,
            top: 1,
            child: _buildHolidaysMarker(),
          ),
        );
      }

      return children;
    },
  ),
),

위 코드에서 markersBuilder는 날짜에 표시될 커스텀 위젯을 생성하는 콜백 함수입니다. 해당 날짜에 이벤트가 있는 경우 _buildEventsMarker 함수를 호출하여 이벤트를 표시하고, 휴일이 있는 경우 _buildHolidaysMarker 함수를 호출하여 휴일을 표시합니다.

이제 플러터 애플리케이션에서 캘린더와의 연동을 구현하기 위해 위 단계를 따라하면 됩니다.

더 자세한 내용은 table_calendar 패키지의 문서를 참조하시기 바랍니다.