생애 첫 앱 개발 기록 - Pomodoro 앱 개발 (1)

저번에 했던 기획안에 맞추어 대강 화면을 어떻게 구성할지 손으로 그렸다.

피그마 같은 걸 쓰면 더 기깔나긴 하겠지만 당장 앱 만드는 게 우선이라 피그마를 배워서 쓰기보다는 일단 손으로 그려서라도 대충 시각적으로 모양을 잡아봤다.

총 화면 구성은 3개로 하기로 했다.

 

- 홈화면

- 설정화면

- 통계화면

 

먼저 전체 앱을 관통하고 있는 BottomNavigationBar를 기준으로 화면 전환하도록 계획했다.

폴더 구조는 위와 같이 가져갔다.

models (class를 구성해서 담을 걸 대비)

screens (화면 파일)

widgets (위젯 컴포넌트 따로)

main 얘가 기준

 

띄울 화면들은 List로 하드코딩해서 탭하면 index가 바뀜에 따라 화면도 바뀌는 그런 구성을 가져갔다.

Appbar에 body 부분에 선언했던 screen들을 불러오도록 위와 같이 코딩하였다.

 

 

홈화면에는 위와 같이 변수를 선언하였다.

 

집중 시간, 휴식시간, 리마인드 시간, 이날 수행한 Pomodoro 횟수를 나오게 했고

Timer가 굴러감에 따라 시작, 일시정지, 리셋 기능을 구현하였다.

이렇게 각각의 함수들 구성했다.

 

테스트로 집중시간 3초, 휴식시간 5초를 부여했을 때의 화면이다.

이렇게 재생, 일시정지 기능과, Pomodoro 횟수가 잘 올라가는 걸 볼 수 있다.

 

홈화면은 어느정도 윤곽이 나왔다.

 

지금은 설정 페이지 작업 중이며 집중 시간과 휴식시간을 Slider 위젯을 통해 조절하려고 한다.

그리고 GetX 상태관리를 도입하여 설정화면에서 설정한 시간들을 전역으로 저장하여 홈화면에도 전달하는 과정에 있다.

 

내일 해야할 거

- 설정화면 시간 설정 기능

- 홈화면과 설정된 시간 연결

- 인터벌 끝날 때마다 소리 설정 (옵션)