Flutter 캘린더 모달에서 안전한 할 일 삭제: 오류 해결 및 UI 개선 가이드

안녕하세요! 스테디빌더입니다! 😊
 
지난 글에서는 캘린더 모달에서 할 일 추가 시
모달이 중첩되는 문제에 대해 해결했었죠 !
 
2024.12.26 - [같이 공부합시다 - Flutter/Flutter로 To-Do 앱 만들기] - Flutter 캘린더 모달 중첩 문제 해결: 깔끔한 할 일 추가 기능 구현하기

Flutter 캘린더 모달 중첩 문제 해결: 깔끔한 할 일 추가 기능 구현하기

 
캘린더 모달 안에서 할 일 목록 추가 기능을 넣었다가,
계속되는 문제점에 정신이 없네요. 😱😱😱
다 좋은 경험치가 될 거란 걸 믿어 봅시다.. (ㅎ)
 
혹시 Flutter로 캘린더와 To-Do 리스트 앱을 개발하면서,
할 일을 삭제한 후 검은 화면이 나타나거나
앱이 멈추는 문제를 경험해 보셨나요?
 
저는 이 문제를 겪었고, 해결 과정에서 많은 걸 배웠습니다.
 
오늘은 캘린더 모달에서 안전하게 할 일을 삭제하고,
UI를 유지하면서 오류를 방지하는 방법을 공유해 보려고 합니다 !
 

 
 

---

문제 개요

캘린더 모달에서 특정 날짜의 할 일을 여러 개 추가하고, 차례로 삭제한 후 모달을 닫으니 검은 화면이 나타나고 앱이 멈추는 현상이 발생했어요. 앱이 더 이상 동작하지 않아 강제 종료해야만 했습니다.
 
 
 

---

문제의 원인

찾아보니 이 문제의 주요 원인은 Navigator 스택 관리와 삭제 후 상태 갱신의 충돌인 것으로 예상됩니다.

1. Navigator 상태 충돌:
   • 모달 닫기(Navigator.pop)가 제대로 처리되지 않거나, 상태 변경 후 모달 스택이 비정상적으로 남아있어 화면이 멈췄습니다.
2. 삭제 로직의 불완전성:
   • _todoList, _calendarEvents, selectedDateTasks 간의 동기화가 제대로 이루어지지 않아, 삭제 후 잘못된 데이터가 화면에 표시되거나 잔여 상태가 꼬였습니다.
3. UI 갱신 방식 문제:
   • setState와 setModalState가 동시에 호출되면서 모달과 전체 상태 간의 충돌이 발생했습니다.

 
 
 

---

문제 해결 아이디어

1. Navigator 스택 안전 관리:
   • 모달 닫기 전에 Navigator.canPop(context)로 스택 상태를 확인하여 안전하게 닫습니다.
2. 삭제 로직 개선:
   • 삭제 대상 항목을 정확히 추적(indexWhere)하고, 모달 내부 상태(selectedDateTasks)와 전체 상태(_todoList, _calendarEvents)를 분리하여 동기화합니다.
3. 모달 유지하며 삭제 처리:
   • setModalState를 사용해 모달 내부 상태를 갱신하고, 모달이 유지된 상태에서 삭제가 안전하게 이루어지도록 구현합니다.

 
 
 

---

문제 해결 방안

수정된 삭제 버튼 로직

728x90

IconButton(
  icon: const Icon(Icons.delete, color: Colors.redAccent),
  onPressed: () {
    final taskToDelete = task; // 삭제할 항목
    final dateKey = _normalizeDate(_selectedDay ?? DateTime.now()); // 선택된 날짜 키

    setState(() {
      // _todoList에서 삭제
      _todoList.removeWhere((item) =>
          item['task'] == taskToDelete &&
          _normalizeDate(DateTime.parse(item['date'])) == dateKey);

      // _calendarEvents에서 해당 항목 삭제
      _calendarEvents[dateKey]?.remove(taskToDelete);

      // 해당 날짜의 이벤트 리스트가 비었다면, 날짜 키 제거
      if (_calendarEvents[dateKey]?.isEmpty ?? true) {
        _calendarEvents.remove(dateKey);
      }
    });

    setModalState(() {
      selectedDateTasks.remove(taskToDelete); // 선택된 날짜의 목록 갱신
    });
  },
),

 
 
 
 

---

주요 변경 사항

1. _todoList에서 정확히 삭제:
   • 삭제하려는 항목의 날짜(dateKey)와 작업(taskToDelete)을 기준으로 정확히 매칭되는 항목만 제거합니다.
2. _calendarEvents 업데이트:
   • 삭제된 작업만 제거하고, 해당 날짜의 이벤트 리스트가 비었으면 날짜 키도 삭제합니다.
3. 모달 상태 갱신:
   • setModalState로 selectedDateTasks를 동기화하여 삭제된 항목이 모달에서 즉시 사라지도록 처리합니다.

 
 
 
 

---

Navigator 문제 해결

Navigator 상태를 안전하게 관리하여 모달 닫기와 UI 갱신 간 충돌을 방지합니다.
 

수정된 닫기 버튼 로직

IconButton(
  icon: const Icon(Icons.close),
  onPressed: () {
    // Navigator 상태 확인 후 모달 닫기
    if (Navigator.canPop(context)) {
      Navigator.of(context).pop();
    }
  },
),

 
 
 
 

---

테스트 결과

잘 동작하게 되었습니다 !
 
 
 

---

결론

이제 캘린더 모달에서 안전하게 할 일을 삭제할 수 있습니다.
삭제 작업 후에도 모달이 유지되고, 삭제된 항목이 정확히 반영되며, 앱이 멈추는 문제도 해결되었습니다. 😊
 
후우, 이런 문제들을 겪으면서 데이터간의 동기화가 얼마나 중요한지, 그리고 이런 계산들을 미리 설계해야 한다는 게 얼마나 중요한 건지 깨닫게 되었습니다.
 
이 글이 Flutter 앱 개발 과정에서 유용한 참고가 되었길 바래 봅니다.
 
오늘도 고생하셨습니다 !
 
끝 !