728x90
반응형
Flutter로 캘린더 앱을 만들 때, 사용자는 가장 먼저 “오늘”을 확인한다.
또한 날짜별로 이벤트가 있는지를 쉽게 파악할 수 있어야 한다.
이번 글에서는 table_calendar
패키지를 활용해 오늘 날짜 강조와 이벤트 마커 표시 기능을 구현해보자.
🌞 오늘 날짜 강조하기
calendarStyle
옵션을 활용하면 오늘 날짜에만 스타일을 적용할 수 있다.
calendarStyle: CalendarStyle(
todayDecoration: BoxDecoration(
color: Colors.orange.shade300,
shape: BoxShape.circle,
),
todayTextStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
todayDecoration: 오늘 날짜 배경 꾸미기
todayTextStyle: 텍스트 스타일 지정
컬러나 모양을 바꿔서 오늘을 중심으로 캘린더를 구성할 수 있다.
🔴 날짜별 이벤트 마커 표시
이벤트 마커는 eventLoader
를 통해 자동으로 표시할 수 있다.
Map<DateTime, List<String>> events = {
DateTime(2024, 10, 8): ['팀 미팅'],
DateTime(2024, 10, 9): ['디자인 회의', '블로그 작성'],
};
TableCalendar(
eventLoader: (day) {
return events[day] ?? [];
},
)
eventLoader가 리스트를 반환하면 자동으로 마커(●)가 날짜 아래에 표시된다.
✨ 마커를 커스터마이징하기
기본 마커는 ● 하나지만, calendarBuilders
로 더 감각적인 마커로 바꿀 수 있다.
calendarBuilders: CalendarBuilders(
markerBuilder: (context, date, events) {
if (events.isEmpty) return SizedBox();
return Positioned(
bottom: 4,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: events.map((e) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 1),
width: 6,
height: 6,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
);
}).toList(),
),
);
},
),
여러 개의 이벤트가 있을 경우 여러 개의 작은 동그라미로 표시할 수 있다.
📌 팁: 오늘이 선택되었을 때 스타일 충돌 방지
selectedDecoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
오늘 날짜를 선택했을 경우 selectedDecoration
이 우선 적용된다.
둘을 동시에 구분하려면 내부에서 isSameDay 조건으로 스타일을 나누거나
색을 다르게 주는 방식이 필요하다.
🧘 마무리하며
오늘을 강조하고, 이벤트가 있는 날짜를 표시하는 것만으로도 캘린더의 정보 전달력은 훨씬 좋아진다.
오늘이 어떤 날인지, 단번에 알아차릴 수 있는 캘린더 그게 바로 사용자 중심 UI다.
✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 캘린더 앱 만들기 여정입니다.
728x90
반응형
'Flutter > Flutter 캘린더 앱 만들기' 카테고리의 다른 글
할 일 완료 체크 및 삭제 기능 추가 (2) | 2025.06.03 |
---|---|
이벤트 알림 기능 — Flutter Local Notification 활용하기 (0) | 2025.06.02 |
주간/월간 보기 전환 — 다양한 뷰 모드 지원하기 (0) | 2025.05.31 |
이벤트 등록 기능 만들기 — 날짜에 할 일 연결하기 (0) | 2025.05.30 |
Flutter 캘린더 UI 구현 — table_calendar 패키지로 시작하기 (0) | 2025.05.29 |