[Flutter] table_calendar를 사용하여 캘린더(달력) 만들기_1

Flutter에서 table_calendar를 사용하여 캘린더(달력) 만들기_기본설정, 상호작용

https://pub.dev/packages/table_calendar

table_calendar | Flutter Package

 

위 table_calendar를 사용한다.

table_calendar 추가

안드로이드 스튜디오 프로젝트 바로 아래 경로에 있는 pubspec.yaml 파일에 dependencies:에 위 처럼 table_calendar를 추가한다.

 

기본 설정

import 'package:table_calendar/table_calendar.dart';

사용하고자 하는 파일에서 table_calendar를 import해준다.

 

이후 TableCalendar에 firstDay, lastDay, focusedDay를 제공해야 한다.

firstDay: 달력에서 사용할 수 있는 첫 번째 날짜이고 사용자는 이전 날짜에 접근 할 수 없다.

lastDay: 달력에서 사용할 수 있는 마지막 날이고 사용자는 이후 날짜에 접근할 수 없다.

focusedDay: 현재 목표 날짜이고 이 속성을 사용하여 현재 표시되어야 하는 날짜를 결정한다.

 

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

위 코드는 달력의 시작날짜를 2010년 10월 16일로 결정하고 마지막 날짜를 2030년 3월 14일로 결정한다.

2010년 10월 16일 이전 날짜와 2030년 3월 14일 이후 날짜에 접근할 수 없고 지정 날짜는(focusedDay) 현재 날짜로 설정된다.

 

상호작용 추가

위에서 설정한 캘린더 위젯이 반응형이 아니다.

현재 표시되는 날짜를 변경하려면 수평으로만 변경이 가능하다.

캘린더 위젯에 아래 코드를 추가하면 선택한 날짜를 선택한 것으로 표시하여 사용자의 선택에 응답할 수 있다.

selectedDayPredicate: (day) {
  return isSameDay(_selectedDay, day);
},
onDaySelected: (selectedDay, focusedDay) {
  setState(() {
    _selectedDay = selectedDay;
    _focusedDay = focusedDay; // 여기서도 '_focused Day' 업데이트해야 한다.
  });
},

 

표시되는 달력 형식을 동적으로 업데이트하려면 해당 행을 위젯에 추가해야 한다.

calendarFormat: _calendarFormat,
onFormatChanged: (format) {
  setState(() {
    _calendarFormat = format;
  });
},

이러한 두 가지 변경사항은 달력을 반응형으로 만들고 사용자 입력에 반응하도록 한다.

 

 

focusedDay 변경

focusedDay를 정적인 값으로 설정하면 TableCalendar 위젯이 다시 빌드될 때마다 특정 focusedDay를 핫 리로드하여 신속하게 테스트가 가능하다.

focusedDay를 DateTime.now()로 설정하고 다음 달로 변경하여 핫 리로드를 트리거 하면 캘린더가 초기 상태로 재설정된다.

이를 방지하려면 focusedDay 콜백이 이를 노출할 때마다 저장하고 변경해야 한다.

아래 코드를 추가하면 설정이 완료된다.

onPageChanged: (focusedDay) {
  _focusedDay = focusedDay;
},

PageChanged() 콜백에서 setState()를 호출할 필요가 없다.

나중에 위젯이 다시 작성될 경우 적절한 포커스가 있는 날을 사용하도록 저장된 값을 업데이트해야 한다.