Flutter 앱에서 다크 모드는 이제 ‘선택’이 아닌 ‘기본’이 되었다.특히 일정을 자주 확인하는 캘린더 앱에서는 어두운 환경에서도 눈이 편안해야 한다.이번 글에서는 Flutter에서 다크 모드를 적용하고, table_calendar 위젯도 어두운 테마에 자연스럽게 녹아들게 만드는 방법을 알아보자.🌙 테마 구성 기본MaterialApp에서 라이트/다크 테마를 모두 정의하고, themeMode로 제어한다.MaterialApp( theme: ThemeData( brightness: Brightness.light, scaffoldBackgroundColor: Colors.white, primarySwatch: Colors.indigo, ), darkTheme: ThemeData( ..

매주 월요일 회의, 매달 1일 결제일, 매년 생일.캘린더 앱에서 반복되는 일정은 피할 수 없는 기능이다.이번 글에서는 Flutter에서 “매주”, “매달” 반복되는 이벤트를 어떻게 구현할 수 있을지 정리한다.📌 반복 이벤트의 구조 설계이벤트 객체에 반복 유형을 추가한다:enum RepeatType { none, daily, weekly, monthly }class Event { final String title; final DateTime date; final RepeatType repeat; bool isDone; Event({ required this.title, required this.date, this.repeat = RepeatType.none, this.isD..

이벤트를 등록하는 것만큼 중요한 건 할 일 완료 체크와 삭제 기능이다.이번 글에서는 날짜별 할 일을 체크박스로 완료 처리하고, 필요 시 삭제까지 가능한 캘린더 할 일 관리 UI를 만들어본다.📌 이벤트 모델 구조 확장이제 단순 문자열이 아닌 객체로 이벤트를 관리하자.class Event { final String title; bool isDone; Event({required this.title, this.isDone = false});}이제 이벤트는 제목과 완료 여부를 포함하는 구조가 된다.🗓️ 날짜별 이벤트 리스트 구조Map> _events = { DateTime(2024, 10, 10): [Event(title: '운동하기')], DateTime(2024, 10, 11): [Event(t..

Flutter로 캘린더 앱을 만들 때, 사용자는 가장 먼저 “오늘”을 확인한다.또한 날짜별로 이벤트가 있는지를 쉽게 파악할 수 있어야 한다.이번 글에서는 table_calendar 패키지를 활용해 오늘 날짜 강조와 이벤트 마커 표시 기능을 구현해보자.🌞 오늘 날짜 강조하기calendarStyle 옵션을 활용하면 오늘 날짜에만 스타일을 적용할 수 있다.calendarStyle: CalendarStyle( todayDecoration: BoxDecoration( color: Colors.orange.shade300, shape: BoxShape.circle, ), todayTextStyle: TextStyle( fontWeight: FontWeight.bold, color: Co..

캘린더 앱 사용자마다 선호하는 뷰가 다르다.누군가는 한눈에 볼 수 있는 월간 뷰를, 누군가는 집중된 일정 관리가 가능한 주간 뷰를 원한다.이번 글에서는 table_calendar 패키지를 활용해 주간/월간 뷰 전환 기능을 제공하는 방법을 알아보자.📌 table_calendar는 뷰 전환을 기본 지원CalendarFormat을 활용하면 월간, 2주, 주간 보기 전환이 가능하다.내가 따로 레이아웃을 만들 필요 없이 내장된 포맷만 전환하면 된다.CalendarFormat _calendarFormat = CalendarFormat.month;TableCalendar( focusedDay: _focusedDay, firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTim..

캘린더 UI를 만들었으면 이제 그 안에 할 일이나 이벤트를 추가할 차례다.이번 글에서는 table_calendar 위젯에 날짜별 할 일 등록 및 표시 기능을 구현해본다.📦 이벤트 데이터를 어떻게 저장할까?Map> _events = { DateTime(2024, 10, 1): ['회의', 'Flutter 과제 제출'], DateTime(2024, 10, 2): ['블로그 작성'],};각 날짜를 key로, 해당 날짜에 등록된 이벤트 목록을 List로 관리한다.📅 table_calendar에 이벤트 연결TableCalendar( focusedDay: _focusedDay, firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31..