생산성을 높이는 할 일 관리 앱에 뽀모도로 타이머 추가하기

https://roquen4145.tistory.com/279

생산성을 높이는 할 일 관리 앱 만들기 MVP 소개

잎선 포스팅에서 기본적인 기능들만 개발된 앱을 소개했습니다.

그런데 단순히 완료 체크만 할 수 있다면 굳이 이 앱을 쓸 필요가 없는데요.

그래서 실행까지 도와줄 수 있도록 뽀모도로 타이머를 추가하려고 합니다.

 

뽀모도로 타이머란?

뽀모도로 타이머는 아래처럼 생긴 시계를 말합니다.

 

도매토피아 뽀도모로 타이머

원래 이런 타이머의 목적은 음식할 때 조리시간을 맞추는 것인데요.

이탈리아 경영 컨설턴트인 프란체스코 치릴로가 대학 시절에 토마토 모양의 조리 타이머로

공부를 하며 시간 관리를 한 적이 있어서 뽀모도로 기법이 만들어졌습니다.

뽀모도로 기법의 핵심은 25분 집중하고 5분 쉰다는 것인데요.

25분 동안에는 다른 것을 하지 않는 것이 중요합니다.

그래서 제가 만든 생산성 앱에서도 할 일을 하는 동안 시계가 줄어드는 것을 보여줘서

집중에 도움이 되도록 하려고 합니다.

 

뽀모도로 타이머 참고 코드 찾기

제가 만들고 있는 앱은 플러터 기반입니다.

그래서 뽀모도로 타이머 관련된 코드가 있는지 확인하고 벤치마크 하는 것이 첫 단계입니다.

플러터 관련 벤치마크는 아래 링크에서 찾으면 좋습니다.

https://flutterawesome.com

저는 아래 링크의 뽀모도로 타이머가 마음에 드네요.

https://flutterawesome.com/a-simple-pomodoro-app-written-in-flutter/

A simple Pomodoro App written in Flutter

 

뽀모도로 타이머 구현하기

이제 참고할 코드도 찾았고 구현만 하면 됩니다.

그런데 타이머 하나 구현하는 것이 생각보다 막막하네요.

이럴 때 쓰려고 만들어 놓은 저의 앱을 사용해봅니다.

뽀모도로 타이머를 추가하기 위한 할 일 추가

위와 같이 할 일을 추가해봤습니다!

타이머 추가와 버튼 추가를 다른 할 일로 구분했고

동작시키는 것도 별도의 할 일로 나눴습니다

 

+ 시뮬레이터에서 내용들을 영어로 쓴 이유는 iOS 17버전의 시뮬레이터에서 버그가 있어서 그렇습니다
한글 자,모음이 분리되는 버그인데 버전을 바꾸면 된다고 합니다

 

뽀모도로 타이머 구현 결과

뽀모도로 타이머

일단 아름다움을 포기하고 구현만 해놨습니다.

구현 자체는 코드 참고해서 복붙하느라 얼마 걸리진 않았는데요.

참고했던 깃허브의 코드는 이미 있던 다른 플러터 패키지를 참고해서 잘 꾸며놓은 것이었습니다.

결국 CircularCountDownTimer 패키지를 받아서 구현했습니다.

https://pub.dev/packages/circular_countdown_timer

circular_countdown_timer | Flutter package

그래서 변수 설정이나 controller 사용에 대한 좋은 참고가 되었습니다.

 

좀 더 자세한 내용을 말씀드리면,

원래는 저 살구색 부분이 statelessWidget으로 구성되어 있었는데

clock controller를 taskDetailView에 넣으면서 statefulWidget으로 바꿨습니다.

 

버튼을 타이머 동작중에는 Stop으로 바꾸게 한다거나 더 이쁘게 꾸민다거나 하는 후속 작업이 있을 것 같습니다.

여기까지 뽀모도로 타이머 추가 포스팅을 마치겠습니다.