[플러터/flutter] 달력 Event 구현해보기 ( Table_calendar 라이브러리)

이전시간까지 달력의 큰 틀은 구현했다.

이번엔 event를 설정하는 방법을 알아보자. 이를 통하면 특정 날짜(DateTime)에 어떠한 형태의 객체든 귀속시켜서 관리할 수 있어서 매우 편하다.

이게 무슨 말이냐? event에 넣을 객체를 우리가 직접 정의한다.

class Event {
  String title;
  bool complete;
  Event(this.title, this.complete);

  @override
  String toString() => title;
}

1. 이렇게 Event 객체를 직접 정의한다.

2. 이러한 이벤트들을 날짜별로 묶은 모델을 만들어준다.

지금은 임시로 하드코딩하지만, 나중엔 DB에서 불러오는 형태겠찌?

Map<DateTime,dynamic> eventSource = {
  DateTime(2022,1,3) : [Event('5분 기도하기',false),Event('교회 가서 인증샷 찍기',true),Event('QT하기',true),Event('셀 모임하기',false),],
  DateTime(2022,1,5) : [Event('5분 기도하기',false),Event('치킨 먹기',true),Event('QT하기',true),Event('셀 모임하기',false),],
  DateTime(2022,1,8) : [Event('5분 기도하기',false),Event('자기 셀카 올리기',true),Event('QT하기',false),Event('셀 모임하기',false),],
  DateTime(2022,1,11) : [Event('5분 기도하기',false),Event('가족과 저녁식사 하기',true),Event('QT하기',true)],
  DateTime(2022,1,13) : [Event('5분 기도하기',false),Event('교회 가서 인증샷 찍기',true),Event('QT하기',false),Event('셀 모임하기',false),],
  DateTime(2022,1,15) : [Event('5분 기도하기',false),Event('치킨 먹기',false),Event('QT하기',true),Event('셀 모임하기',false),],
  DateTime(2022,1,18) : [Event('5분 기도하기',false),Event('자기 셀카 올리기',true),Event('QT하기',false),Event('셀 모임하기',false),],
  DateTime(2022,1,20) : [Event('5분 기도하기',true),Event('자기 셀카 올리기',true),Event('QT하기',true),Event('셀 모임하기',true),],
  DateTime(2022,1,21) : [Event('5분 기도하기',false),Event('가족과 저녁식사 하기',true),Event('QT하기',false)]
};

이런 식으로 key-> DateTime / value는 List<Event> 형태로 만들어주면 된다.

그 다음 이 Map 객체를 LinkedHashMap 객체로 한번더 변형해준다. 이건 무슨 객체냐면 == 비교나 hash 값 불러오는 등의 기능을 사용자 정의할 수 있게 해주는 map이다. dart:collection 라이브러리 import하고 사용할 수 있다. 아래와 같이 사용한다.

final events = LinkedHashMap(
  equals: isSameDay,
)..addAll(eventSource);

)..addAll(eventSource)는 객체 생성과 동시에 addAll메소드를 실행하라는 소리다.
equals 파라미터는 isSameDay 함수 실행으로 equal여부를 판단하도록 사용자 정의한다는 소리

이렇게 데이터 모델 준비는 끝났다.

3. 이제 다시 TableCalendar 위젯으로 돌아가서 eventLoader 파라미터 설정을 해준다.

eventLoader는 DateTime 인자를 받아 List를 출력해주는 함수를 넣어주면 된다.
아까 Map<Datetime, List> 형태로 만들었던 데이터 모델 기억 나는가? 이 map을 통해 List를 반환하면 될 것이다.

List<Event> getEventsForDay(Datetime day) {
    return events[day] ?? [];
  }

이런 식의 메소드를 만들어봤다. 나는 편의를 위해 GetX Controller에 넣어놓고 사용 중인데 그냥 위젯 메소드로 넣어놔도 무방하다. 공식문서도 그렇게 했다.

이런식으로 이제 넣어주면 된다. 나는 컨트롤러 사용중이라 저렇게 표시된 거다.

여기까지 해주면 저 eventLoader콜백이 알아서 모든 날짜별로 인자를 넣어서 콜을 해준다. 그렇게 해서 return 값에 길이가 있는 리스트가 나오면 이벤트가 있는 것으로, 없으면 이벤트가 없는 것으로 알아서 판단해준다.