table_calender basics에 관한 이해

https://pub.dev/packages/table_calendar

table_calendar | Flutter Package

flutter의 주요 라이브러리중 하나인 table_calendar에 대해서 포스팅을 써보겠다. 

총 5가지의 예제들이 있으며, 오늘은 그중 첫번째인 basics에 대해서 포스팅하겠다.

firstDay: kFirstDay,
lastDay: kLastDay,
focusedDay: _focusedDay,
calendarFormat: _calendarFormat,

basics_example의 TableCalender안에 있는 코드 

firstDay: 달력의 시작 날짜, lastDay 달력의 끝 날짜, focusedDay 기본적으로 표시되어있는 날짜 (당일날짜)

CalendarFormat _calendarFormat = CalendarFormat.month;
DateTime _focusedDay = DateTime.now();

basics_example의 class선언문에 있는 코드, 위에서 쓰이는 _focusedDay와 _calendarFormat이 정의된다. 

final kToday = DateTime.now();
final kFirstDay = DateTime(kToday.year, kToday.month - 3, kToday.day);
final kLastDay = DateTime(kToday.year, kToday.month + 3, kToday.day);

utils.dart내에 있는 코드. 각각 당일, 3달전, 3달후로 나뉜다. 

 

 

selectedDayPredicate: (day) {
  // Use `selectedDayPredicate` to determine which day is currently selected.
  // If this returns true, then `day` will be marked as selected.

  // Using `isSameDay` is recommended to disregard
  // the time-part of compared DateTime objects.
  return isSameDay(_selectedDay, day);
},

selectedDayPredicate 새로운날짜를 클릭했을때, 그날짜로 selectedDay를 바꿔주는 기능을 하는듯함. 

onDaySelected: (selectedDay, focusedDay) {
  if (!isSameDay(_selectedDay, selectedDay)) {
    // Call `setState()` when updating the selected day
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });
  }
},

onDaySelected는 setState를통해 selectedDay가 바뀌었을때 업데이트 시켜주는 것이라고 생각하면 될듯함 

앞의 selectedDayPredicate 코드와 세트인듯하다. 

onFormatChanged: (format) {
  if (_calendarFormat != format) {
    // Call `setState()` when updating calendar format
    setState(() {
      _calendarFormat = format;
    });
  }
},

달력에 있는 2week month 1week로 바꾸는 버튼을 작동케 하는 코드다. 

onPageChanged: (focusedDay) {
  // No need to call `setState()` here
  _focusedDay = focusedDay;
},

이거는 달 자체가 넘어가는, 페이지가 바뀌었을때 코드같은데, 사실 큰 의미는 없는거같다. 

 

focusedDay: 당일-반투명 selectedDay: 클릭한 날짜-불투명