코딩강의/Flutter 로 웹툰 앱 만들기(플러터-노마드코더)
POMODORO APP 만들기 - Timer
김마드
2023. 7. 31. 18:02
1. 버튼을 누르면 1초당 값이 바뀌는 것을 만들어 보자
Dart 내부함수에 Timer를 이용하여 1초당 실행할 함수를 세팅해놓고 이전에 배운 setState를 활용하여 값을 변경해주자
class _HomeScreenState extends State<HomeScreen> {
int totalSeconds = 1500;
late Timer timer;
void onTick(Timer timer) {
setState(() {
totalSeconds = totalSeconds - 1;
});
}
void onStartPressed() {
timer = Timer.periodic(
const Duration(seconds: 1),
onTick,
);
}
totalSeconds 화면에 반영
body: Column(
children: [
Flexible(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
child: Text(
'$totalSeconds',
style: TextStyle(
color: Theme.of(context).cardColor,
fontSize: 89,
fontWeight: FontWeight.w600,
),
),
),
),
onPressed 연동
Flexible(
flex: 3,
child: Center(
child: IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: onStartPressed,
icon: const Icon(Icons.play_circle_outline),
),
),
),
결과화면
