할 일 완료 체크 및 삭제 기능 추가

이벤트를 등록하는 것만큼 중요한 건 할 일 완료 체크와 삭제 기능이다.
이번 글에서는 날짜별 할 일을 체크박스로 완료 처리하고, 필요 시 삭제까지 가능한 캘린더 할 일 관리 UI를 만들어본다.

---

📌 이벤트 모델 구조 확장

이제 단순 문자열이 아닌 객체로 이벤트를 관리하자.

class Event {
  final String title;
  bool isDone;

  Event({required this.title, this.isDone = false});
}

이제 이벤트는 제목과 완료 여부를 포함하는 구조가 된다.

---

🗓️ 날짜별 이벤트 리스트 구조

Map<DateTime, List<Event>> _events = {
  DateTime(2024, 10, 10): [Event(title: '운동하기')],
  DateTime(2024, 10, 11): [Event(title: '블로그 작성')],
};

이제 각 날짜마다 Event 객체 리스트를 연결한다.

---

✅ 할 일 완료 체크 UI

ListView(
  children: (_events[_selectedDay] ?? [])
      .asMap()
      .entries
      .map((entry) {
        int index = entry.key;
        Event event = entry.value;

        return CheckboxListTile(
          title: Text(
            event.title,
            style: TextStyle(
              decoration: event.isDone ? TextDecoration.lineThrough : null,
            ),
          ),
          value: event.isDone,
          onChanged: (bool? value) {
            setState(() {
              event.isDone = value ?? false;
            });
          },
        );
      })
      .toList(),
)

CheckboxListTile을 사용하면 체크박스와 텍스트를 한 번에 표현할 수 있다.

---

🗑️ 할 일 삭제 기능

각 항목 옆에 삭제 아이콘을 추가해 간단하게 제거할 수 있게 하자.

ListTile(
  leading: Checkbox(
    value: event.isDone,
    onChanged: (value) {
      setState(() {
        event.isDone = value ?? false;
      });
    },
  ),
  title: Text(event.title),
  trailing: IconButton(
    icon: Icon(Icons.delete, color: Colors.red),
    onPressed: () {
      setState(() {
        _events[_selectedDay]?.removeAt(index);
      });
    },
  ),
)

삭제는 리스트에서 해당 인덱스를 제거하는 방식으로 구현한다.

---

💡 UX 향상 팁

• 완료된 항목은 흐릿한 스타일로 표시
• 삭제 전 확인 다이얼로그 추가
• 완료된 항목 자동 숨기기 toggle 기능

---

🧘 마무리하며

Flutter 캘린더 앱이 더 실용적으로 느껴지는 순간은 할 일을 직접 완료 체크하고, 관리할 수 있을 때다.

단순한 일정 등록을 넘어, 내가 실천한 것을 확인하는 것.
이제 Flutter 앱이 당신의 할 일 관리자 역할을 해줄 것이다.

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