주간/월간 보기 전환 — 다양한 뷰 모드 지원하기

캘린더 앱 사용자마다 선호하는 뷰가 다르다.
누군가는 한눈에 볼 수 있는 월간 뷰를, 누군가는 집중된 일정 관리가 가능한 주간 뷰를 원한다.

이번 글에서는 table_calendar 패키지를 활용해 주간/월간 뷰 전환 기능을 제공하는 방법을 알아보자.

---

📌 table_calendar는 뷰 전환을 기본 지원

CalendarFormat을 활용하면 월간, 2주, 주간 보기 전환이 가능하다.
내가 따로 레이아웃을 만들 필요 없이 내장된 포맷만 전환하면 된다.

CalendarFormat _calendarFormat = CalendarFormat.month;

TableCalendar(
  focusedDay: _focusedDay,
  firstDay: DateTime.utc(2020, 1, 1),
  lastDay: DateTime.utc(2030, 12, 31),
  calendarFormat: _calendarFormat,
  onFormatChanged: (format) {
    setState(() {
      _calendarFormat = format;
    });
  },
)

calendarFormat에 현재 상태를 지정하고, onFormatChanged를 통해 사용자가 전환할 수 있게 만든다.

---

🌓 버튼으로 전환 UI 만들기

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      onPressed: () {
        setState(() {
          _calendarFormat = CalendarFormat.week;
        });
      },
      child: Text("주간 보기"),
    ),
    TextButton(
      onPressed: () {
        setState(() {
          _calendarFormat = CalendarFormat.month;
        });
      },
      child: Text("월간 보기"),
    ),
  ],
)

별도의 버튼 UI를 만들면 사용자가 명확하게 전환할 수 있는 경험을 제공할 수 있다.

---

🎨 전환 UI를 더 감성적으로

예를 들어 토글 스위치처럼 보이게 할 수도 있다:

ToggleButtons(
  isSelected: [_calendarFormat == CalendarFormat.week, _calendarFormat == CalendarFormat.month],
  onPressed: (index) {
    setState(() {
      _calendarFormat = index == 0 ? CalendarFormat.week : CalendarFormat.month;
    });
  },
  children: [Text("Week"), Text("Month")],
)

Flutter UI는 ToggleButtons, SegmentedButton, TabBar 등 다양한 전환 UI를 지원한다.

---

📅 월간과 주간 뷰 비교

• 월간 보기: 전체 일정 흐름 파악, 비어있는 날 확인에 유리
• 주간 보기: 세부 일정이 많을 때 유리, 스크롤 적음

캘린더 앱에서는 두 가지 뷰 모두 지원하는 게 베스트다.
상황에 따라 바꿔 쓸 수 있는 유연성이 UX를 높인다.

---

💡 팁: 기본 포맷 저장

// shared_preferences 등을 활용하여 사용자의 선택을 저장하면 더 좋다.

---

🧘 마무리하며

날짜를 보여주는 방식은 다양할수록 좋다.
주간 뷰와 월간 뷰를 자유롭게 오가며 사용자에게 더 많은 선택지를 제공하는 것 — 그게 진짜 친절한 앱이다.

시간을 보여주는 법, 당신의 손에 달려 있다.

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