Flutter _ Timer

230526

 

---

오늘은 지난 포스팅에 이어

Timer를 만들어 보겠다.

 

---

Timer를 만들기 전에

세 번째 Flexible에 있는

Container의 모서리 부터

빠르게 둥글게 만들고 가자.

 

BorderRadius.circular(50)을 적용 시켰다.

 

훌륭하다.

 

---

1. Timer

 

우리는 아래의 Button을 누르면

위의 숫자가 줄어드는 Timer를 만들것이다.

 

---

우선 시간을 나타내는

totalSeconds를 선언하고

 

25분을 초로 환산하면 1500초 이므로

1500이라 선언한다.

 

그리고 버튼을 눌렀을때

Timer가 실행되야 하므로

onStartPressed() 함수를 선언한다.

 

중요한 포인트는

Dart는 표준 라이브러리에서

Timer를 제공하는데

 

Timer를 통해 정해진 간격에

한번씩 함수를 실행할 수 있다.

 

이러한 Timer는 버튼을 누를때마다

초기화가 되어야 하기에

앞에 late라는 variable modifier를 사용한다.

 

 

---

 

💡 late

 

late modifier는 이 property를

당장 초기화 하지 않아도 되지만

반드시 나중에 초기화 할것이다는걸 뜻한다.

 

---

❗ Undefined class 'Timer'

만약 Timer 선언 시

위와 같은 경고가 뜬다면,

 

맨 상단에

import 'dart:async';

위와 같이 dart:async를 import 해주자.

 

---

Periodic time은 주기마다

위 사진의 (timer) {} 함수를 실행시킨다.

이때 주기는 duration으로 조정할 수 있다.

 

위와 같이

Duration(seconds : 1)로

1초 마다 timer 자리의 함수가 실행되게 했다.

 

Duration이 실행시킬 함수를 선언해보자.

 

위의 onTick()는

setState()로 totalSeconds 1씩 뺄것이다.

 

즉, 1초마다 HomeScreenWidget의 setState를 실행할 것이다.

 

그리고 위와 같이

함수 자리에 넣어준다.

 

---

❗ onTick()? onTick?

 

주의해야할 점은

onTick()로 넣으면 안된다.

 

괄호() 는 함수를 지금 실행한다는것을 의미하므로

우리는 Timer가 실행해줄테니

괄호를 넣지 않아도 된다.

---

그리고 위와 같이

onTick의 인자로 Timer timer를 넣어주면

error또한 없어진다.

 

---

이제 함수가 잘 실행되는지 확인해보자.

 

25 : 00 이란 문자 대신

$totalseconds를 넣어주고

 

두 번째 Flexible에 있는

IconButton의

비어있는 onPressed 자리에

onStartPressed함수를 넣어준다.

 

영상으로 보면 좋겠지만

우선 버튼을 눌렀을때

1씩 숫자가 줄어들고 있다.

 

한가지 모순은

버튼을 누를때마다 

Timer가 실행되므로

점점 숫자 줄어드는 속도가 늘어난다.

 

이를 방지하기 위해 일시정지 버튼이 필요하고

이것은 다음 포스팅에서

만들겠다.