Flutter - 달력 보여주기: table calendar

https://pub.dev/packages/table_calendar
table calendar 패키지를 사용해서 달력을 보여주자

table calendar

기본 구조

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


iTableCalendar(
      locale: 'ko_KR',
      firstDay: DateTime.now().subtract(Duration(days: 365*10 + 2)),
      lastDay: DateTime.now().add(Duration(days: 365*10 + 2)),
      focusedDay: _focusedDay,
      selectedDayPredicate: (day) {
        return isSameDay(_selectedDay, day);
      },
      onDaySelected: (selectedDay, focusedDay) {
        setState(() {
          _selectedDay = selectedDay;
          _focusedDay = focusedDay;
        });
      },
      onPageChanged: (focusedDay) {
        _focusedDay = focusedDay;
      },
      calendarFormat: _calendarFormat,
      onFormatChanged: (format) {
        setState(() {
          _calendarFormat = format;
        });
      },
      calendarBuilders: CalendarBuilders(
        defaultBuilder: (context, dateTime, _) {
          return CalendarCellBuilder(context, dateTime, _, 0);
        },
        todayBuilder: (context, dateTime, _) {
          return CalendarCellBuilder(context, dateTime, _, 1);
        },
        selectedBuilder: (context, dateTime, _) {
          return CalendarCellBuilder(context, dateTime, _, 2);
        },
      ),
    )

locale: 기준 고르기

firstDay, lastDay: 달력의 최대 한도라고 생각하면 된다. 코드에서는 현재 날짜를 기준으로 10년 전과 후로 설정했다.

focusedDay: 달력을 보여줄 때 기준이 되는 날짜로, DateTime 오브젝트를 넘겨주면 된다. 현재 코드에서는 현재 날짜로 정했다.

selectedDayPredicate, onDaySelected: 해당 코드로 사용자가 탭하여 선택한 날짜를 선택된 표시로 업데이트할 수 있다.

calendarFormat: 한 달, 2주, 1주로 달력 포맷을 바꿀 수 있다. CalendarFormat.month와 같이 지정할 수 있다.

calendarBuilders: 달력을 빌드한다. defaultBuilder는 보통 날짜 셀들, todayBuilder는 오늘 날짜 셀, selectedBuilder는 사용자가 탭해서 선택한 날짜의 셀을 빌드한다. 다른 옵션들도 많음

CalendarCellBuilder

  Widget CalendarCellBuilder(BuildContext context, DateTime dateTime, _, int type){
    /*
    do stuff
    */
    return Container(
      padding: EdgeInsets.all(3),
      child: Container(
        padding: EdgeInsets.only(top: 3, bottom: 3),
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          border: Border.all(color: borderColor, width: 3),
          borderRadius: BorderRadius.all(Radius.circular(7)),
          color: color,
        ),
        child: Column(
          children: [
            Text(date, style: TextStyle(fontSize: 17),),
            Expanded(child: Text("")),
            Text(moneyString,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 12, color: nowIndexColor[900]),),
          ],
        ),
      ),
    );
  }

날짜 셀은 그냥 아무 위젯이나 반환해서 자유롭게 만들고 싶은 대로 만들어 주면 된다.
width를 MediaQuery.of(context).size.width로 설정하여 셀의 가능한 최대 크기로 만들 수 있다.

---