Flutter 캘린더 UI 구현 — table_calendar 패키지로 시작하기

Flutter로 일정 관리 앱을 만들고 싶다면, 캘린더 UI 구현부터 시작해야 한다.
이번 글에서는 가장 많이 쓰이는 table_calendar 패키지를 이용해 기본적인 달력 UI를 구성하고, 날짜 선택, 이벤트 연결을 위한 준비를 해본다.

---

📦 패키지 설치

// pubspec.yaml
dependencies:
  table_calendar: ^3.0.9
  intl: ^0.18.1

table_calendar는 직관적인 API를 제공하며, intl은 날짜 포맷팅에 사용된다.

---

📅 기본 캘린더 위젯 구성

TableCalendar(
  focusedDay: DateTime.now(),
  firstDay: DateTime.utc(2020, 1, 1),
  lastDay: DateTime.utc(2030, 12, 31),
)

단 3줄만으로 기본 캘린더가 나타난다. 기본적으로 현재 날짜가 포커스되며 월 단위로 전환된다.

---

📌 날짜 선택 기능 추가

DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay;

TableCalendar(
  focusedDay: _focusedDay,
  firstDay: DateTime.utc(2020, 1, 1),
  lastDay: DateTime.utc(2030, 12, 31),
  selectedDayPredicate: (day) {
    return isSameDay(_selectedDay, day);
  },
  onDaySelected: (selectedDay, focusedDay) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });
  },
)

선택한 날짜는 selectedDayPredicate를 통해 표시되고, 클릭 시 상태가 갱신된다.

---

🎨 스타일 커스터마이징

calendarStyle: CalendarStyle(
  todayDecoration: BoxDecoration(
    color: Colors.orange,
    shape: BoxShape.circle,
  ),
  selectedDecoration: BoxDecoration(
    color: Colors.blueAccent,
    shape: BoxShape.circle,
  ),
  outsideDaysVisible: false,
),

기본 테마에서 벗어나 오늘 날짜, 선택 날짜를 강조하거나 요일/주말 텍스트 색상을 바꾸는 것도 가능하다.

---

📅 월 단위 전환 및 헤더 설정

headerStyle: HeaderStyle(
  formatButtonVisible: false,
  titleCentered: true,
  titleTextStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  leftChevronIcon: Icon(Icons.arrow_back_ios, size: 16),
  rightChevronIcon: Icon(Icons.arrow_forward_ios, size: 16),
),

헤더 부분은 월 제목 커스터마이징, 화살표 아이콘 설정 등으로 꾸밀 수 있다.

---

📌 참고: 이벤트 연결을 위한 준비

향후 특정 날짜에 메모나 일정 등을 보여주기 위해선 이벤트 데이터를 Map<DateTime, List<Event>> 구조로 관리하게 된다.

// 이후 글에서 자세히 다룰 예정
final Map<DateTime, List<String>> events = {
  DateTime(2024, 10, 1): ['회의', '과제 제출'],
};

---

🧘 마무리하며

캘린더는 단순한 UI를 넘어 사용자의 시간을 관리하는 중요한 도구다.
Flutter에서 table_calendar를 활용하면 감각적인 일정 관리 UI를 빠르게 만들 수 있다.

시간을 담는 앱, 지금부터 시작해보자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 캘린더 앱 만들기 여정입니다.