오늘 날짜 강조 및 마커 표시 기능 구현하기

2025. 6. 1. 09:00·Flutter/Flutter 캘린더 앱 만들기
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
'Flutter/Flutter 캘린더 앱 만들기' 카테고리의 다른 글
  • 할 일 완료 체크 및 삭제 기능 추가
  • 이벤트 알림 기능 — Flutter Local Notification 활용하기
  • 주간/월간 보기 전환 — 다양한 뷰 모드 지원하기
  • 이벤트 등록 기능 만들기 — 날짜에 할 일 연결하기
코드를 걷는 사람
코드를 걷는 사람
devwanderer 님의 블로그 입니다.
  • 코드를 걷는 사람
    터미널 밖으로 나온 개발자
    코드를 걷는 사람
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Flutter
        • Flutter 게시판 앱 만들기
        • Flutter 뉴스 앱 만들기
        • Flutter 메모 앱 만들기
        • Flutter 캘린더 앱 만들기
        • Flutter 날씨 앱 만들기
      • Next.js
      • Ruby On Rails
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    UIUX
    flutter앱개발
    코드를걷는사람
    flutter개발
    다크모드
    감성앱
    UI디자인
    백엔드개발
    정적사이트
    Firebase
    모바일앱개발
    캘린더앱
    openweather
    table_calendar
    ActiveRecord
    RubyOnRails
    rails보안
    flutter디자인
    날씨앱
    Nextjs
    뉴스앱
    메모앱
    Flutter
    flutter기초
    flutterui
    개발블로그
    flutter게시판
    fluttertips
    북마크기능
    flutter상태관리
  • 최근 댓글

  • 최근 글

  • 반응형
    250x250
  • hELLO· Designed By정상우.v4.10.3
코드를 걷는 사람
오늘 날짜 강조 및 마커 표시 기능 구현하기
상단으로

티스토리툴바