[flutter] 달력(table_calendar) 패키지의 날짜 선택기능 구현

내가 만드는 앱에 달력을 구현하려고 패키지를 찾다가 table_calendar라는 패키지를 찾았다. 기능은 심플하다.

TableCalendar(
  firstDay: DateTime.utc(2010, 10, 16),
  lastDay: DateTime.utc(2030, 3, 14),
  focusedDay: DateTime.now(),
);

패키지 예제에 있는 이 코드를 다음과 같이 stateful 위젯 안에 넣어주기만 하면 된다.

이 코드도 간결하다.

firstDay : 달력 시작날
lastDay : 달력 마지막날
focusedDay : 첫 달력 화면에서 포커스가 맞춰지는 곳, 대부분 직관적으로 오늘 날짜.



기본 코드만 넣어놔도 이처럼 바로 달력이 생성되는 Magic을 볼 수 있다.

 

이래서 쉬운줄 알았지만...
초보자인 내가 이해하기 어려운 복병이 있었다.

 

onDaySelected: (selectedDay, focusedDay) {
      },

onDaySelected.. 직관적으로 '날짜를 선택하는' 코드이구나라고 생각하였다.

특정 날짜를 누르면 아래 SnackBar가 뜨도록 만들었다.

근데 날짜를 선택하면 자연스럽게 해당 날짜에 파란 동그라미가 생기는 기능은 없고,
왜 focusedDay와 selectedDay는 같은 걸까? 의문만 생겼다.

결론은..

특정 일자를 select한다고 자동으로 해당 일자에 동그라미가 쳐지지 않는다.

selectedDayPredicate: (day) {
        return isSameDay(_selectedDay, day);
      },

 

해당 일자를 선택하고 그 일자에 동그라미가 생성되게 하려면 selectedDayPredicate코드가 필요하다.

이 코드를 dubug하면 참 신기하다. 

 만약 선택된 날짜, selectedDay가 2월 16일이면, 저 day는 2월 1일부터 2월 28일 넘어 3월 초, 현재 달력이 보이는 모든 날짜를 한바퀴 돈다. 그러면서 마치 금도끼 은도끼처럼, "이 날짜가 맞느냐?"를 isSameDay(_selectedDay, day) 함수를 통해 물어본다. 날짜가 다르면 계속 false를 반환할 것이다. 그리고 2월 16일이 되어서야 true를 반환한다. 그리고도 종료를 안하고 3월 초까지 한바퀴 여정을 마치게 된다.

참고로 isSameDay는 table_calendar 패키지 내에 있는 함수다.

저렇게 마치고 나면 true를 반환한 2월 16일에 파란 동그라미가 생기게 된다.

하나 선택할 때마다 한바퀴를 다 도는 코드를 하고 있는거다.

 

초기 코드가 굉장히 직관적으로 보여서, Example로만 빨리 코드를 갖다쓰려다 이해가 안되서 1~2시간 넘게 고민했던 부분이다. 이렇게 찾아가는 것도 실력향상에 도움이 될 것이라고 생각해본다.

쉬운 내용이지만, 저처럼 시간 쓰지 않으셨으면 좋겠다는 생각에 공유합니다. 읽어주셔서 감사합니다.