캘린더 일정관리 앱 #2

 

today_banner.dart

화면 가운데에 선택된 날짜와 스케줄 개수를 보여주는 배너를 구성해준다

textStyle은 위에 따로 정의해주었다

 

 

 

home_screen.dart

캘린더와 배너 사이 공간을 SizedBox로 만들어준다

scheduleCount는 아직 스케줄 데이터가 생성되지 않았으니 임의로 넣어주었다

 

 

 

현재까지 모습이다

캘린더에서 특정일을 클릭하면 그 날만 글자가 커지게 했다 ㅎㅎ..디테일이 세상을 바꾼다

 

 

 

schedule_card.dart

스케줄 카드에 스케줄 시작시간과 끝나는 시간 지정해주는 부분이다

"${startTime.toString().padLeft(2, "0")}:00"

8:00 -> 08:00 이렇게 시간 부분이 한자리 숫자면 앞에 0을 채워주도록 해주었다

문자로 만들고 왼쪽 패딩값을 2자리로 지정해주고 2자리 수가 아닐 경우 0으로 채우는..!

today_banner에도 재빨리 적용해줬다

 

 

 

schedule_card.dart

받아온 context(내용) 설정 부분이다

 

 

 

schedule_card.dart

일정마다의 카테고리를 보여주는 색상 원 부분이다

 

 

 

schedule_card.dart

스케줄 박스에서 _Content가 차지하는 부분을 _Time가 차지하는 부분과 높이를 똑같이 맞춰주기 위해 IntrinsicHeight를 사용했다

IntrinsicHeight는 가장 높은 위젯이 차지하고 있는 높이만큼 다른 위젯들의 크기를 동일하게 맞춰준다

 

 

 

home_screen.dart

작성한 스케줄 카드를 적절히 배열, 구성해준다

sizedBox로 각 스케줄 카드 간격을 띄워주었다

 

ListView를 사용해 스케줄 카드를 여러 개 구성해주었다

itemCount는 카드의 개수이다

 

https://api.flutter.dev/flutter/widgets/ListView-class.html

ListView class - widgets library - Dart API

ListView Class 참고 페이지 첨부한다

각 스케줄 카드끼리 간격을 주고자 ListView.sperated를 사용했다

 

 

 

스케줄 카드 개수가 많아 화면 밖을 나가도 스크롤이 잘 된다

 

 

 

home_screen.dart

홈스크린에 플로팅 액션 버튼을 만들어주었다

버튼이 눌리면 showModalBottomSheet()를 이용해 bottom sheet를 열어준다

 

플로팅 액션 버튼의 색상은 primaryColor로 넣어주었다

Icon은 더하기 모양의 add 아이콘으로 지정했다

 

 

 

new_schedule_btm_sheet.dart

플로팅 액션 버튼을 누르면 보여지는 화면 구성이다

viewInsets.bottom을 이용해 아래부터 실제 키패드가 차지하는 부분을 구해주고

그것을 활용해 컨테이너의 높이를 구성한다

키패드가 차지하는 부분만큼을 더 더한 부분만큼 컨테이너 높이가 올라간다

 

TextField()를 이용해 키패드를 열어준다