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

안녕하세요! 스테디빌더 입니다. 😊
 
지난 글에서는 캘린더에서 원하는 날짜를 누르고
할 일을 추가할 때의 문제를 해결 했었죠.
 

Flutter 캘린더 모달에서 선택한 날짜로 할 일 추가하기: 문제 해결 가이드

 
 

이번에도 발생된 문제를 해결하는 글이예요 ㅎㅎ
재미없죠… 압니다… 그래도 마무리를 해야겠죠? ㅠ^ㅠ
 
정확한 데이터 설계 없이 되는대로,
Flutter로 To-Do 리스트 앱을 개발하다 보니,
이런저런 오류가 많이 발생되는 것 같네요.
😫😫😫
 
이번에는 캘린더 모달에서 할 일을 추가할 때
모달이 계속 중첩되는 문제가 발생했습니다.
 
네, 중첩… 모달이 계속 열린다는 거죠. 후..
😱😱😱
 
이번 글에서는,
캘린더 모달에서 선택한 날짜의 할 일을 추가할 때
발생되는 모달 중첩 문제를 해결하는 방법 !
 
도움이 될까 모르겠지만 한 번 함께해 보겠습니다.
 
아 참고로 이번에는 굉장히 쉬운 해결이예요,
이런 실수를 해서 부끄러울 지경이네요 😫

 
 

반복되는 모달에 당황하는 스테디빌더

 

---

 

오늘 다룰 내용

1. 모달 중첩 문제란?
2. 문제의 원인
3. 중첩 방지를 위한 코드 수정
4. UI/UX 개선 팁

 
 

---

1. 모달 중첩 문제란?

캘린더 모달에서 특정 날짜를 선택한 후 할 일을 추가하면
기존 모달이 닫히지 않고 새로운 모달이 계속 열리면서
화면에 여러 개의 모달이 겹쳐지는 문제가 발생했습니다.
 
이런 문제가 발생하면:

• 화면이 복잡해지고, 사용자가 어느 모달을 닫아야 할지 헷갈릴 수 있습니다.
• 앱의 동작이 매끄럽지 않아 사용자 경험(UX)이 떨어지게 됩니다.
• 일단 반복해서 닫아야 하므로 귀찮아서 앱을 꺼버릴 수도 있습니다. 😱😱😱

 
 

---

2. 문제의 원인

중복 호출

_showTasksForSelectedDay 메서드에서:

1. 새로운 모달이 열릴 때 기존 모달을 닫지 않았던게 원인으로 확인됩니다.
2. 반복적으로 할 일을 추가할 때마다 새로운 모달이 열리면서 중첩되었어요. 😱😱😱

 
 

---

3. 중첩 방지를 위한 코드 수정

핵심 아이디어

• 기존 모달 닫기: Navigator.of(context).pop()을 호출해 기존 모달을 닫고, 새로운 모달을 열도록 수정합니다.
• 중첩 방지: 모달을 닫고 새로 열리는 로직을 명확히 작성합니다.

---

수정된 _showTasksForSelectedDay 메서드

728x90

void _showTasksForSelectedDay() {
  final selectedDateTasks = _getEventsForDay(_selectedDay ?? DateTime.now());

  // 기존 모달 닫기 후 새로운 모달 열기
  Navigator.of(context).pop(); // 기존 모달 닫기

  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return Container(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 상단: 제목과 닫기 버튼
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '${_selectedDay != null ? _selectedDay!.toLocal().toString().split(' ')[0] : '오늘'} 일자의 할 일',
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.close),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ],
            ),
            const Divider(),

            // 중간: 할 일 목록
            selectedDateTasks.isEmpty
                ? const Center(
                    child: Text(
                      '할 일이 없습니다!',
                      style: TextStyle(
                          fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                  )
                : Expanded(
                    child: ListView.builder(
                      itemCount: selectedDateTasks.length,
                      itemBuilder: (context, index) {
                        final task = selectedDateTasks[index];
                        return Card(
                          elevation: 4.0,
                          margin: const EdgeInsets.symmetric(vertical: 8.0),
                          child: ListTile(
                            title: Text(
                              task,
                              style: const TextStyle(fontSize: 16),
                            ),
                            trailing: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                IconButton(
                                  icon: const Icon(Icons.edit,
                                      color: Colors.blueAccent),
                                  onPressed: () {
                                    _showEditTodoDialog(
                                        context,
                                        _todoList.indexWhere(
                                            (item) => item['task'] == task));
                                  },
                                ),
                                IconButton(
                                  icon: const Icon(Icons.delete,
                                      color: Colors.redAccent),
                                  onPressed: () {
                                    setState(() {
                                      _deleteTodoItem(_todoList.indexWhere(
                                          (item) => item['task'] == task));
                                    });
                                    Navigator.of(context).pop();
                                    _showTasksForSelectedDay(); // 목록 갱신
                                  },
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),

            // 하단: "할 일 추가" 버튼
            Padding(
              padding: const EdgeInsets.only(top: 16.0),
              child: ElevatedButton.icon(
                  icon: const Icon(Icons.add),
                  label: const Text('할 일 추가'),
                  onPressed: () {
                    _showAddTodoDialog(context);
                  }),
            ),
          ],
        ),
      );
    },
  );
}

 
 
 

---

주요 변경점

1. 기존 모달 닫기:
   • Navigator.of(context).pop()으로 기존 모달을 닫고 새로운 모달을 엽니다.
2. 모달 중첩 방지:
   • 새로운 모달이 열리기 전에 기존 모달을 닫기 때문에 중첩 문제가 해결됩니다.

 
 
 

---

4. UI/UX 개선 팁

• 할 일 추가 후 목록 자동 갱신:
  • 할 일을 추가한 후 setState를 사용해 목록이 즉시 갱신되도록 구현하면 사용자 경험이 더 좋아집니다.
• 애니메이션 효과 활용:
  • 모달이 열리고 닫힐 때 애니메이션 효과를 추가해 동작이 더 자연스럽게 보이도록 개선할 수 있습니다.

 
 

---

결과 확인

문제 해결 후 기대 동작

1. 캘린더 모달에서 특정 날짜를 선택:
   • 기존 모달이 닫히고 새로운 모달이 열립니다.
2. 반복적으로 할 일 추가:
   • 중첩 없이 한 번에 하나의 모달만 열리며, 목록이 갱신됩니다.
3. UI 깔끔 유지:
   • 중복된 모달이 사라져 화면이 깔끔해지고 사용자 경험이 향상됩니다.

 
 

---

결론

이제 캘린더 모달에서 모달 중첩 문제를 해결하고,
할 일을 추가할 때 매끄럽게 동작하도록 개선되었습니다.
 
작은 변화이지만, 사용자에게는 크게
버그로 다가올 수도 있던 부분이었죠.

사용자 경험을 크게 향상시킬 수 있는
중요한 수정이에요! 😊
 
다음 글에서는 뭔가 새로운 기능이나
로직을 추가하고 싶지만,
아직도 남은 문제점들이 있어요. 😱😱😱
 
캘린더에서 날짜별 할 일을 추가하고,
이를 다시 삭제할 때 발생되는
오류를 다뤄보겠습니다.
 
궁금한 점이나 개선 아이디어가 있다면
댓글로 꼭 남겨주세요.
 
오늘도 고생하셨습니다 !
 
끝 !