1주차 : 하루 일과표(Time Slot) UI 작성

하루 일과 계획표를 위해 벤치마킹할 패키지를 찾았다. 

 

https://pub.dev/packages/syncfusion_flutter_calendar

syncfusion_flutter_calendar | Flutter Package

 

자료는 위의 링크와 같다. 그래고 패키지에 대한 자세한 설명은 아래 웹 페이지에 잘 나와있다. 

 

https://help.syncfusion.com/flutter/calendar/overview

About Flutter Event Calendar widget | Syncfusion | Scheduler

 

이 코드를 공부해서 내가 필요로하는 하루 일과표 UI를 만들어 보고자 한다. 대략적은 구조는 아래의 그림과 같다. 

크게 4가지의 요소가 필요할 것이라 생각된다. 

1. Header에 년, 월, 일을 표시하는 위젯
2. 시간표시 줄에 해당하는 값(범례)을 보여주는 위젯 
3. 하루를 시간 단위로 표현하는 time slot (선)
4. 사용자가 입력한 일정을 그려주는 위젯

여기서 2, 3, 4번 요소는 아래위로 scroll이 가능하도록 하여 0시부터 24시까지 확인이 가능해야 한다. 

 

Adobe XD를 이용해서 대략적인 UI 디잔인을 했다.

색깔이 좀 단순해보여서 변경이 필요하고, 표면의 재질도 코르크같은 느낌으로 변경하고 싶은데 일단은 위와 같은 구조의 UI 코드를 작성하려고 한다. 

 

Syncfusion 코드가 어려워서 그 보다는 쉬운 아래의 영상에서 설명하는 코드로 작성을 시작했다.