Flutter로 To-Do 리스트 앱에 캘린더 기능 추가하기 (TableCalendar 활용) (1)

자, 이번 시간에는 Flutter를 사용해 To-Do 리스트 앱에 캘린더 기능을 추가해봅시다.
이번 글에서는 TableCalendar 패키지를 활용해 날짜별로 할 일 목록을 표시하는 방법을 단계적으로 설명하겠습니다.
아래 단계를 따라 하면, 앱에 캘린더 UI를 추가하고 날짜 선택에 따라 데이터를 필터링하는 기능을 구현할 수 있습니다.

캘린더 환영하는 스테디빌더

---

최종 목표

1. 캘린더 UI 추가: TableCalendar를 사용하여 기본 캘린더를 표시.
2. 날짜 선택 기능: 선택한 날짜에 해당하는 할 일을 보여줌.
3. 할 일과 날짜 연결: 각 할 일이 날짜와 매핑되도록 데이터 구조 확장.

---

단순한 캘린더가 아니예요~
캘린더 날짜에 따라 할 일 목록을 표시해 줄 겁니다.
어때요. 흥미진진하죠?
 

 
오늘도 힘내봅시다 !
 
 
 

---

Flutter 패키지 확인

플러터에서 제공되는 패키지 중에 캘린더도 당연히 있겠죠 ?
플러터 제공 패키지는 https://pub.dev 에서 확인 가능해요 !
 
<pub.dev 패키지 검색 화면>

 
<테이블 캘린더 패키지 샘플 화면>

 
패키지를 사용하려면 설치가 필요하죠.
 
 
 

---

패키지 설치 필요

table_calendar 패키지 설치
pubspec.yaml 파일에 의존성 추가:

dependencies:
  table_calendar: ^3.1.3

 

---

<pubspec.yaml 파일에 의존성 추가>

---

 
최신 버전은 3.1.3 입니다. 참고해 주세요 : )
 
<의존성 추가 참고>
To-Do List 앱 Step 5. 데이터 저장

To-Do List 앱 Step 5. 데이터 저장

 

테스트 해보는 것은 아주 쉽습니다.
기본 생성된 프로젝트에서, 화면에 뿌려주는 부분만 손보면 되니까요.
 
<캘린더 기본 코드만 추가>

 
<캘린더 결과>

 
오늘 날짜 기준으로 캘린더가 출력되네요.
좋아요. 이 패키지 기능을 사용해 봅시다 : )
 
 
 

---

캘린더 띄울 수 있는 아이콘 버튼 추가하기

AppBar 위젯에 캘린더 아이콘을 추가할게요.
 
<캘린더 아이콘 추가>

 
오! 아이콘 귀여워요 : )
클릭 했을 때 캘린더가 뜨면 되겠죠?
 
 
 

---

캘린더 아이콘 클릭 시 캘린더 띄우기

아이콘을 클릭했을 때의 동작은 onPressed 속성에 설정하면 되죠 : )
기억나시죠 ? 기억 안나면 여기 아래 글을 참고해 주세요 : )
To-Do List 앱 Step 2-1. 플로팅버튼 > 다이얼로그 기본 호출 구조

To-Do List 앱 Step 2-1. 플로팅버튼 > 다이얼로그 기본 호출 구조

 
<캘린더 보여주는 메서드 호출>

 
아이콘 버튼을 눌렀을 때, _showCalendar 메서드를 호출하도록 했어요.
이제 캘린더를 띄우는 메서드를 작성하면 되겠네요 : )
 
 
 

---

캘린더 보여주는 메서드 맛보기

<_showCalendar 메서드에서 TableCalendar 위젯 설정하기>

 
table_calendar 패키지 설치 하셨죠?
안 하셨으면 이 글 제일 위쪽에서 확인 !
 
<패키지 Import 하기>

 
TableCalendar 에 빨간 밑줄이 있다면,
Ctrl + ‘ . ‘ ⇒ Quick Fix  패키지 Import 를 해주세요.
 
 
 

---

테이블 캘린더 위젯 처음 띄워보기

<TableCalendar 위젯 기본 띄우기>

 
<캘린더 호출 성공>

 
깔끔한 디자인의 캘린더가 확인되네요.
우리는 테마의 colorScheme 을 적용했고,
저의 경우 seedColor 를 yellow 로 잡았기 때문에,
따뜻한 색상의 캘린더가 나왔네요.
 
예뻐요 ~~
 

 
캘린더 호출을 확인했으니, 다시 메서드 작성을 진행해 봅시다.
 
이제부터는 좀 복잡할 수 있어요.
화면이 동작하는 방식을 봤으니, 
이제 할 일이 캘린더에 어떻게 연결되는지
데이터 설계를 해야 하거든요.
 
다음 시간에 이어서 해봅시다 : )
 
오늘도 고생하셨습니다 !
 
끝 !