플러터 과제

이담현·2026년 4월 21일
  1. 프로젝트 구조 및 설정앱 진입점 (main.dart): MaterialApp을 통해 앱을 시작하며, HomeScreen을 첫 화면으로 설정합니다.디자인 시스템 (colors.dart): 앱 전역에서 사용할 색상을 상수로 관리하여 유지보수성을 높입니다.const: 컴파일 시점에 값이 결정됨.final: 실행(런타임) 시점에 값이 결정됨.!

(Null Assertion): 개발자가 해당 변수가 절대 null이 아님을 보장할 때 사용합니다.2. 상태 관리와 화면 구성 (home_screen.dart)사용자의 상호작용(날짜 선택)에 따라 화면이 변해야 하므로 StatefulWidget을 사용합니다.상태 변수 (selectedDate): 현재 선택된 날짜를 저장합니다. DateTime.utc를 사용하여 시간 정보를 배제하고 날짜 비교를 정확하게 수행합니다.

로직 (onDaySelected): 사용자가 특정 날짜를 클릭하면 setState()를 호출하여 selectedDate를 업데이트하고 UI를 다시 그립니다.

레이아웃: Scaffold와 SafeArea를 사용해 기기별 UI 간섭을 방지하고, Column으로 캘린더와 이후 추가될 일정 리스트를 세로로 배치합니다.

  1. 캘린더 커스터마이징 (main_calendar.dart)table_calendar 패키지를 별도의 위젯으로 분리하여 가독성과 재사용성을 높였습니다.주요 속성역할focusedDay캘린더가 현재 보여줄 기준 날짜 (주로 오늘)firstDay / lastDay사용자가 이동할 수 있는 전체 날짜 범위selectedDayPredicate어떤 날짜가 '선택된 상태'인지 판단하는 조건식 (핵심 로직)HeaderStyle캘린더 상단 제목 정렬 및 버튼 표시 여부 설정CalendarStyle날짜별 배경색, 테두리, 텍스트 스타일 등 시각적 디자인 정의4. 핵심 코드 분석: 날짜 선택 로직자료에서 가장 중요한 부분은 부모(HomeScreen)와 자식(MainCalendar) 간의 데이터 전달입니다.부모 → 자식: selectedDate(값)와 onDaySelected(함수)를 전달합니다.자식 → 부모: 사용자가 날짜를 클릭하면 전달받은 onDaySelected 콜백 함수를 실행하여 부모의 상태를 변경합니다.

날짜 비교: date.year == selectedDate.year ... 형식을 통해 연, 월, 일이 모두 일치하는지 확인하여 정확한 선택 표시(Decoration)를 적용합니다.

학습 포인트 정리컴포넌트화: 복잡한 TableCalendar 설정을 별도 파일로 분리하여 코드가 깔끔해졌습니다.

UI 커스텀: BoxDecoration과 TextStyle을 활용해 기본 캘린더를 앱의 브랜드 색상(PRIMARY_COLOR)에 맞춰 세밀하게 디자인하는 방법을 익혔습니다.

데이터 흐름: 위젯 간에 데이터와 함수를 주고받는 Flutter의 기본적인 데이터 흐름(Data Down, Event Up)을 실습했습니다.

profile
최고 최선의 코드를 생성하는 개발자

0개의 댓글