Flutter로 캘린더에서 선택한 날짜의 할 일 상세 보기 구현하기

Flutter로 캘린더에서 선택한 날짜의 할 일 상세 보기 구현하기

2024. 12. 23. 13:16ㆍ같이 공부합시다 - Flutter/Flutter로 To-Do 앱 만들기

728x90

안녕하세요! 😊 오늘은 Flutter로 캘린더 앱을 개발할 때 선택한 날짜의 할 일을 상세히 보여주는 기능을 구현하는 방법을 적용해 보겠습니다. To-Do 리스트 앱에 캘린더 기능이 포함되어 있다면, 특정 날짜를 선택했을 때 그 날짜의 할 일을 깔끔하고 보기 좋게 표시해주는 기능이 꼭 필요할 것 같아요. 편리하겠쥬?

이 글에서는 TableCalendar 의 onDaySelected 와 _getEventsForDay 메서드를 활용해서 선택한 날짜의 할 일을 표시하는 상세 보기를 구현합니다. 더 나아가 할 일 편집, 삭제 기능까지 포함한 UI 개선 방법도 적용해보고 알려드릴게요!

<선택한 날짜를 자세히 들여다 보는 스테디베어>

💡 오늘의 목표

선택한 날짜의 할 일을 모달 창에 표시하기
할 일 항목에 편집 및 삭제 버튼 추가
깔끔한 UI 디자인으로 사용자 경험 개선하기

✨ 개선된 기능 설계

1. 선택한 날짜의 할 일 보기

캘린더에서 날짜를 선택하면, 선택한 날짜의 할 일을 모달 창으로 표시합니다. 모달 창 상단에는 날짜를 표시하고, 할 일 목록이 없을 경우 메시지를 보여줍니다.

2. 할 일 편집 및 삭제

각 할 일 항목에는 편집 버튼과 삭제 버튼을 추가해 사용자가 쉽게 작업을 관리할 수 있도록 합니다.
삭제 후 모달 창을 자동으로 업데이트하여 실시간으로 반영합니다.

3. UI 디자인 개선

Card와 ListTile을 활용해 할 일 목록을 깔끔하게 디자인합니다.
날짜, 버튼, 목록 등의 배치를 조정해 사용자 친화적인 화면을 만듭니다.

🛠️ 구현 코드

개선된 _showTasksForSelectedDay 메서드

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

  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(); // 목록 갱신
                                  },
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
          ],
        ),
      );
    },
  );
}

🔍 구현 결과

날짜별 할 일 보기
- 사용자가 날짜를 선택하면 해당 날짜의 할 일이 모달 창에 표시됩니다.
편집 및 삭제 기능
- 할 일 목록에서 바로 편집하거나 삭제할 수 있습니다.
UI 개선
- 카드형 디자인으로 깔끔하고 보기 좋은 화면을 제공합니다.
실시간 업데이트
- 할 일을 삭제하면 모달 창이 즉시 업데이트되어 변경 사항이 반영됩니다.

<캘린더 모달 할 일이 있는 일자를 선택하면 이제 상세 화면이 열린다.>

<선택한 일자에 할 일이 없는 경우>

✨ 추가로 시도해 볼 개선 사항

할 일 추가 기능:
- 모달 창에서 바로 새로운 할 일을 추가할 수 있도록 버튼을 추가합니다. 이 다음 글에서 바로 적용해 볼게요 😁
완료 상태 표시:
- 각 항목에 체크박스를 추가해 완료 여부를 표시하고 상태를 변경할 수 있도록 합니다. 이것도 적용 예정이랍니다 😅
테마 적용:
- Material 3의 다양한 스타일을 활용해 모달 창 디자인을 더 세련되게 만듭니다.

마무리

이렇게 Flutter로 캘린더에서 선택한 날짜의 할 일을 상세히 보여주는 기능을 구현했습니다.

간단한 기능 같아 보이지만, 이런 세심한 개선이 사용자의 만족도를 높여줍니다! 😊 ( 전 그렇게 생각합니다 😅 )
다음 글에서는 선택한 날짜에 할 일이 없을 경우 할 일을 추가할 수 있도록 버튼도 추가해 보겠습니다.

궁금한 점이 있다면 댓글로 남겨주세요!

함께 더 나은 앱을 만들어 봅시다! 🚀