플러터 - Pomodoro 앱 만들기 (Timer, statefulwidget...)

Pomodoro는 25분 집중하고 5분 쉬고를 반복하는 시간 관리 방법론이다.

 

즉, 기본적으로 타이머 앱이다.

 

Pomodoro는 기능은 이렇다.

 

1. 25분이 기본적으로 설정되어있어야함

2. 시작 버튼을 누르면 타이머 시작되면서 시간 줄어듦

3. 25분이 다 지나가면 Pomodoro 횟수 증가

 

-옵션

- 타이머 일시정지 기능

- 리셋 기능

 

폴더 구조

 main에 ThemeData를 넣어주고 screens 폴더에서 출력될 화면 관리

 

메인 파일

ThemeData에는 backgroundColor, textTheme, cardColor를 선언해줬다.

각각 색깔만 넣어준 정도

 

홈스크린 파일

Scaffold 안에  들어있는 파일은 이렇다.

 

먼저 큰 틀은 Flexible을 활용해 1 : 3 : 1로 화면을 나눈다.

타이머 (1) : 버튼 (3) : 뽀모도로 횟수 (1)

 

함수 처리 부분

먼저 4개의 변수를 불러온다.

-25분의 초를 저장해놓는 변수

-시간

-타이머 작동 여부

-뽀모도로 횟수

 

그리고 가장 중요한 Timer를 late로 불러온다. 

시작을 누르면 timer 작동하는 함수를 넣기 위해 late로 선언했다.

 

시작을 누르면 Timer.periodic을 넣어주어 1초마다 onTick 함수가 실행될 수 있도록 설정

그리고 isRunning도 true로 바꿔준다.

 

onTick은 시간이 남았을 때와 안 남았을 때로 구분.

시간이 다 됐으면 뽀모도로 횟수 1 추가, 다시 25분으로 리셋하는 과정을 해주고

timer.cancel로 선언했던 Timer.periodic에 들어있는 콜백이 실행되지 않도록 막아준다.

시간이 남았으면 그냥 시간 1초씩 줄여주면 된다.

 

resetTimer는 timer.cancel해주고 시간 초기화해주면 끝

 

타이머 정지로 timer.cancel 해주고 작동 여부만 바꿔준다.

 

Format 변환은 Dart에서 제공해주는 Duration을 활용한다.

 

처음에 선언한 1500초를 Duration의 seconds로 넣어주면 아래와 같이 나온다.

 

시간 : 분 : 초. (소수점 초)

이런 식으로 나온다.

 

mm : ss 이런 식으로 표현해주기 위해서 Duration의 값을 조정해준다.

 

split해서 시간 : 분 : 초 부분만 떼오고 앞의 시간 부분을 날렸다.

(떼온 부분을 다시 " : "를 기준으로 split해서 분, 초 만 끌어다가 써도 상관 없을 듯)

 

완성된 모습은 다음과 같다.

 

시작하면 버튼 모양 바뀌고 시간 굴러가고

리셋하면 다시 25분으로 설정되는 걸 확인할 수 있다.

 

---

Dart 언어에 내장되어있는 Timer와 Duration API를 활용하여 만들어본 간단한 타이머 앱이다.

 

Flutter를 배우는 단계이지만 Flutter는 프레임워크라는 걸 절대 잊지말자.

Dart 안에 들어있는 내장 API와 메소드들도 많이 알아둬야겠다.