Flutter로 To-Do 리스트 앱 개선하기: 캘린더 닫기 버튼 추가하기

Flutter로 To-Do 리스트 앱을 개발하다 보면,
작은 변화로도 사용자가 더 편리하게
앱을 사용할 수 있게 만들 수 있어요.
 
이번 글에서는
캘린더 모달 창에 닫기 버튼을 추가하는 방법을 다룰게요.

이 기능은 간단하면서도 사용자 경험(UX)을
크게 향상시킬 수 있답니다. 😊

닫기 버튼 추가하는 스테디빌더

---

오늘 다룰 내용

1. 왜 닫기 버튼이 필요할까요?
2. 캘린더 닫기 버튼 구현 방법
3. 사용성 개선 팁과 확장 아이디어

---

1. 왜 닫기 버튼이 필요할까요?

닫기 버튼이 있으면 사용자에게 이런 장점을 줄 수 있어요:

• 명확한 사용성: "어떻게 창을 닫지?" 하는 고민 없이 바로 버튼을 눌러 닫을 수 있어요.
• 일관된 디자인: 모든 모달 창에 닫기 버튼을 추가하면 앱 전체가 더 깔끔하고 통일감 있게 느껴집니다.
• 접근성 강화: 키보드나 화면 리더기를 사용하는 사용자도 쉽게 창을 닫을 수 있어요.

현재 앱에서는 모달 창을 닫으려면 창 바깥을 터치해야 해요.
이런 방식은 처음 사용하는 사용자에게는 약간 불편할 수 있답니다. 😅

---

2. 캘린더 닫기 버튼 구현 방법

그럼 실제로 닫기 버튼을 어떻게 추가하는지 살펴볼까요?
아래는 수정된 _showCalendar 메서드의 코드입니다.

수정된 _showCalendar 메서드

void _showCalendar() {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return StatefulBuilder(
        builder: (BuildContext context, StateSetter setModalState) {
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 닫기 버튼과 제목
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      '캘린더',
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () {
                        Navigator.of(context).pop(); // 모달 닫기
                      },
                    ),
                  ],
                ),
                const Divider(),
                // TableCalendar 추가
                TableCalendar(
                  calendarBuilders: CalendarBuilders(
                    markerBuilder: (context, day, events) {
                      final eventList = _getEventsForDay(day);
                      if (eventList.isNotEmpty) {
                        return Positioned(
                          bottom: 1,
                          child: Container(
                            width: 8.0,
                            height: 8.0,
                            decoration: const BoxDecoration(
                              color: Colors.redAccent,
                              shape: BoxShape.circle,
                            ),
                          ),
                        );
                      }
                      return null;
                    },
                  ),
                  focusedDay: _focusedDay,
                  firstDay: DateTime(2000),
                  lastDay: DateTime(2100),
                  calendarFormat: _calendarFormat,
                  onFormatChanged: (format) {
                    if (_calendarFormat != format) {
                      setModalState(() {
                        _calendarFormat = format;
                      });
                      setState(() {
                        _calendarFormat = format;
                      });
                    }
                  },
                  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
                  onDaySelected: (selectedDay, focusedDay) {
                    setState(() {
                      _selectedDay = selectedDay;
                      _focusedDay = focusedDay;
                    });
                    _showTasksForSelectedDay();
                  },
                ),
              ],
            ),
          );
        },
      );
    },
  );
}

어떤 점이 달라졌을까요?

1. 닫기 버튼 추가
   • Row 위젯을 이용해 닫기 버튼과 제목을 한 줄에 배치했어요.
   • 버튼을 누르면 Navigator.of(context).pop()으로 모달이 닫힙니다.
2. 디자인 개선
   • Divider로 닫기 버튼과 캘린더를 구분해서 UI가 깔끔해졌어요.
3. 모달 크기 최소화
   • mainAxisSize: MainAxisSize.min을 설정해서 화면에서 필요한 공간만 사용하도록 했어요.

---

3. 사용성 개선 팁과 확장 아이디어

이런 점이 더 좋아졌어요!

• 사용자에게 더 친절해졌어요.
  • 닫기 버튼 덕분에 모달을 닫는 방법을 고민할 필요가 없어졌어요.
• 디자인이 일관돼요.
  • 모달마다 닫기 버튼을 추가하면 앱 전체가 더 정돈된 느낌이 들어요.

이런 것도 시도해 볼 수 있어요

1. 키보드 ESC 키 지원
   • 키보드로도 모달을 닫을 수 있다면 더 편리할 거예요.
2. 닫기 애니메이션 추가
   • 닫기 버튼을 누를 때 부드러운 애니메이션 효과를 넣으면 UX가 더 좋아질 거예요.
3. 디자인 다양화
   • 닫기 버튼을 화면 하단에 배치하거나 다른 스타일로 꾸며볼 수도 있겠죠?

---

결론

캘린더 모달 창에 닫기 버튼을 추가해서
사용자 경험을 조금 더 편리하게 만들었어요.
 
이렇게 작은 변화가 실제로는 큰 차이를 만들 수 있답니다! 😊
 
앞으로도 이런 작은 개선을 쌓아가면서
더 완성도 높은 앱을 만들어 보겠습니다!
 
혹시 궁금한 점이나 의견이 있으면 댓글로 남겨주세요!
함께 더 나은 앱을 만들어 봅시다! 💡

---

바뀐 UI

---

추가된 코드 확인

Git : 캘린더 모달 닫기 버튼 추가 · SteadyBuilder/todo_app@93c1cbf