이벤트 등록 기능 만들기 — 날짜에 할 일 연결하기

캘린더 UI를 만들었으면 이제 그 안에 할 일이나 이벤트를 추가할 차례다.
이번 글에서는 table_calendar 위젯에 날짜별 할 일 등록 및 표시 기능을 구현해본다.

---

📦 이벤트 데이터를 어떻게 저장할까?

Map<DateTime, List<String>> _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),
  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
  onDaySelected: (selectedDay, focusedDay) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });
  },
  eventLoader: (day) {
    return _events[day] ?? [];
  },
)

eventLoader를 통해 각 날짜에 해당하는 이벤트 리스트를 넘기면, 캘린더에 ● 표시가 자동으로 나타난다.

---

➕ 새 이벤트 등록 UI 만들기

TextEditingController _eventController = TextEditingController();

void _addEvent() {
  if (_eventController.text.isEmpty) return;

  setState(() {
    _events.update(
      _selectedDay!,
      (existing) => [...existing, _eventController.text],
      ifAbsent: () => [_eventController.text],
    );
    _eventController.clear();
  });
}

✅ 텍스트 입력 + 등록 버튼

Row(
  children: [
    Expanded(
      child: TextField(
        controller: _eventController,
        decoration: InputDecoration(hintText: "할 일을 입력하세요"),
      ),
    ),
    IconButton(
      icon: Icon(Icons.add),
      onPressed: _addEvent,
    )
  ],
)

이렇게 입력된 이벤트는 현재 선택된 날짜에 자동으로 연결된다.

---

📄 선택한 날짜의 이벤트 표시

ListView(
  shrinkWrap: true,
  children: (_events[_selectedDay] ?? [])
    .map((event) => ListTile(
      leading: Icon(Icons.check),
      title: Text(event),
    ))
    .toList(),
)

선택한 날짜에 등록된 이벤트 목록을 아래에 출력할 수 있다.

---

📌 확장 아이디어

• 이벤트에 시간 추가 → DateTime → List<EventModel>
• DB와 연동 → sqflite 또는 Firebase 연동
• 이벤트 삭제 기능도 같이 구현하면 완성도 ↑

---

🧘 마무리하며

단순한 캘린더 UI에 이벤트 등록 기능이 더해지면 Flutter 앱은 곧 일정 관리 도구로 진화한다.

기억보다 기록이 정확하다. Flutter 캘린더에 오늘의 할 일을 남겨보자.

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