티스토리 뷰
하루 일과 계획표를 위해 벤치마킹할 패키지를 찾았다.
https://pub.dev/packages/syncfusion_flutter_calendar
syncfusion_flutter_calendar | Flutter Package
The Flutter Calendar widget has nine built-in configurable views that provide basic functionalities for scheduling and representing appointments/events efficiently.
pub.dev
자료는 위의 링크와 같다. 그래고 패키지에 대한 자세한 설명은 아래 웹 페이지에 잘 나와있다.
https://help.syncfusion.com/flutter/calendar/overview
About Flutter Event Calendar widget | Syncfusion | Scheduler
Flutter Event Calendar (SfCalendar) Overview 23 Apr 20212 minutes to read The Syncfusion Flutter Calendar library was written natively in Dart and has seven types of built-in configurable view modes that provide basic functionality for scheduling, managing
help.syncfusion.com
이 코드를 공부해서 내가 필요로하는 하루 일과표 UI를 만들어 보고자 한다. 대략적은 구조는 아래의 그림과 같다.

크게 4가지의 요소가 필요할 것이라 생각된다.
- Header에 년, 월, 일을 표시하는 위젯
- 시간표시 줄에 해당하는 값(범례)을 보여주는 위젯
- 하루를 시간 단위로 표현하는 time slot (선)
- 사용자가 입력한 일정을 그려주는 위젯
여기서 2, 3, 4번 요소는 아래위로 scroll이 가능하도록 하여 0시부터 24시까지 확인이 가능해야 한다.
Adobe XD를 이용해서 대략적인 UI 디잔인을 했다.

색깔이 좀 단순해보여서 변경이 필요하고, 표면의 재질도 코르크같은 느낌으로 변경하고 싶은데 일단은 위와 같은 구조의 UI 코드를 작성하려고 한다.
Syncfusion 코드가 어려워서 그 보다는 쉬운 아래의 영상에서 설명하는 코드로 작성을 시작했다.
'앱1 개발 공정' 카테고리의 다른 글
공유 오피스에서 코딩하자! (0) | 2024.06.23 |
---|---|
Midjourney를 이용해서 앱 디자인 컨셉 잡기 (0) | 2023.03.17 |
Time_chart 분석 중 (0) | 2021.08.17 |
- Total
- Today
- Yesterday
- DART
- SizedBox
- Chrome
- Syncfusion
- 인사이트
- position
- UX
- addPostFrameCallback
- BLE
- UI
- firebase
- 이미지
- 다트
- 에러
- 크롬
- 디자인
- 앱 프로그래밍
- TextField
- Flutter
- Bluetooth
- 한빛미디어
- IOS
- TextFormField
- 앱
- 문제 해결
- hide
- 플러터
- 앱개발
- plugin
- error
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |