본문 바로가기
프로젝트/pomotime (pomodoro 타이머)

[pommotime] 프로젝트 생성 및 UI 설정

by 두 그루 2023. 11. 3.

 

flutter 프로젝트 생성

터미널에서 flutter create pomotime을 통해 플러터 프로젝트 파일을 설정했다. 파인더에서 바로 터미널이나 vscode를 열 수 있게 설정해서 편히 이용할 수 있다.

https://github.com/soaringwave/pomotime/commit/46bcd26d41b10567675b5fb081450596c08cd8e4

 

Create pomotimer project · soaringwave/pomotime@46bcd26

soaringwave committed Oct 24, 2023

github.com

 


 

UI 설정

전체적으로 한 페이지에서 필요한 하나의 동작을 보여주고자 여러 번에 걸쳐 위와 같이 디자인했다. 나중에 작업하는 뽀모도로뿐만 아니라 휴식 뽀모도로도 보여줄 예정이라 제목을 위에 표시했다. 그리고 총 작업시간을 볼 수 있는 페이지로 이동할 수 있게 Container에 감싸 total time 텍스트를 나타냈다.

 

아직 기능을 구현하기 전에 구조를 먼저 잡는 거라 나중에 타이머 시간을 보여줄 텍스트는 임의로 '00:00'처럼 설정했고, 재생 & 중지 IconButton 모두 onPressed는 () {}로 기능 없이 구현했다.

https://github.com/soaringwave/pomotime/commit/d1943f327cb8459999a62baa44a9ad134fe367a7

 

Remove unnecessary Container · soaringwave/pomotime@d1943f3

soaringwave committed Oct 29, 2023

github.com

 

댓글