Flutter _ Pause Play & Date Format

230527

 

---

오늘은 지난 시간에 이어

Timer를 업그레이드 해보겠다.

 

현재 플레이 버튼을 누르면 누를수록

1초씩 빨리 줄어들기 때문에

일시정지가 필요한 상황이다.

 

이러한 문제를 우선 해결해보자.

 

---

1. Pause Play

 

위와 같이

실행중일때의 상태를 저장하는

bool 타입의 변수를 선언하고

 

두 번째 Flexible에 있는 

아이콘 위젯에 조건을 추가한다.

 

만약 isRunning이 True이면 

Icon은 pause_circle_outline을 보여주고

 

만약 isRunning이 False이면 

Icon은 play_circle_outline을 보여준다.

 

그리고 Timer가 실행되는 함수로 이동하여

타이머가 실행되면

setState()를 이용해

isRunning이 True가 되는 코드를 추가한다.

 

우리는 Icon의 onPressed도

변경해야하는데,

 

일시정지 버튼이 눌렸을때 

작동할 함수 onPausePressed()도 만들어 주자.

 

위와 같이

timer가 cancel()되고

isRunning = false로 바꾸는 함수를 선언한다.

 

그리고 Icon의 onPressed로 가서

isRunning의 값에 따라

함수들이 작동되게 한다.

 

위와 같이 Play버튼을 누르면?

일시정지 버튼으로 바뀌면서

시간이 1초씩 줄어들고

 

 

일시 정지 버튼을 누르면?

재생 버튼으로 바뀌며

시간이 줄어드는게 멈춘다.

 

---

2. Date Format

마지막으로

위의 숫자가 0이 되면

1500으로 초기화되고

 

아래의 Pomodoros가

1씩 추가되는 기능을 추가해보자.

 

---

우선 하단의

Pomodoros의 counting을 나타내줄

변수를 하나 선언한다.

 

그리고 세 번째 Flexible에 있는

0이라는 Text를

위에서 선언한 변수로 치환해준다.

 

 

이제 로직을 만들기 위해서

onTick 매서드로 넘어와

 

조건문을 추가한다.

 

만약  totalSeconds == 0 이면

totalPomodoros 를 1씩 증가isRunning은 false로totalseconds = 1500으로 바꾼다.

 

그렇지 않으면totalSeconds는 1씩 감소한다.

 

---

위와 같이 0이되고

 

다시 1500으로 초기화되고

Pomodoros는 1이 증가한것을 확인할 수 있다.

 

---

테스트를 할때 1500을 복사할 때

실수하는것을 막기위해

 

static const twentyFiveMinutes를 선언하고

totalSeconds와 onTick()를 수정해준다.

 

---

3. Duration

마지막으로

1500으로 나와있는

초 단위가 불편하기에

 

분 단위로 바꿔주는 함수를 선언하자.

 

format()는 인자를 seconds로 받고

duration이라는 변수는

Duration 위젯이며 seconds 를 seconds로 표현해준다.

 

print(duration)과return으로 $seconds를 받아서

 

$totalSeconds 대신

format method를 실행해 보자.

 

그리고 디버그 콘솔을 확인하면?

 

위와 같이 Duration이

우리가 원하는 모습의 시간을

출력하는것을 확인할 수 있다.

 

우리는 분과 초만 원하기에

변환해보자.

---

3-1. toString() & split()

위와 같이 duration을 .toString()으로 

String으로 만들면 우리는 값을 List로 받게 되는데

 

이때 "."으로 split을 하면?

 

시 : 분 : 초 와 초의 소숫점 아래부분이 나뉘어 지고

---

3-2. first

위와 같이 

.first를 사용해 

첫 요소만 가지고 오면?

 

시 : 분 : 초만 출력된다.

 

마지막으로 우리는 분 : 초만 원하기에

substring()을 이용해

요소를 잘라보자.

 

---

3-3. substring()

 

위와 같이 시 : 분 : 초에서

분 : 초만 뽑기위해

 

substring으로 범위를 지정해 주었고이제야 우리가 원하는 값이 출력된다.

 

print를 통해 테스트가 끝났기에

return값으로

print문을 치환해준다.

 

이제 훌륭하게

분 : 초로 값이 출력되는것을 확인할 수 있다.