반응형
import 'dart:async';
이 패키지에서 가져와야 한다.
int totalSeconds = 1500;
// 사용자가 버튼을 누를 때만 타이머가 생성되게 할 예정이라 late로 초기화를 미루자.
late Timer timer;
void onTick(Timer timer) {
setState(() {
totalSeconds = totalSeconds - 1;
});
}
void onStartPressed() {
timer = Timer.periodic(const Duration(seconds: 1), onTick);
}
start 버튼을 누르면...
Timer.periodic이 정해진 간격에 한번씩 함수를 실행하도록 한다.
여기에서는 1초 간격으로 함수 onTick을 실행하도록 한다.
onTick 함수에서는 setState()를 이용해서 1초를 줄이고, 상태가 바뀌었음을 flutter에게 알린다.
그리고
'$totalSeconds'
onPressed: onStartPressed,
이것들도 수정해야 함을 잊지 말자.
참고로, 시작 버튼 누를때마다 시간이 2초씩, 3초씩... 이렇게 감소하니까 주의하자. 이럴때는 debug를 재시작하면된다.
home_screen.dart 전체 코드
import 'package:flutter/material.dart';
// Timer 가져오기
import 'dart:async';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int totalSeconds = 1500;
// 사용자가 버튼을 누를 때만 타이머가 생성되게 할 예정이라 late로 초기화를 미루자.
late Timer timer;
void onTick(Timer timer) {
// state 변경
setState(() {
totalSeconds = totalSeconds - 1;
});
}
void onStartPressed() {
// Timer -> 정해진 간격에 한번씩 함수 실행
// 1초마다 onTick 함수 실행
timer = Timer.periodic(const Duration(seconds: 1), onTick);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Column(
children: [
// Flexible
// 하드 코딩되는 값을 만들게 해줌(?)
// 높이 200, 너비 100픽셀 -> UI에 기반해서 더 유연하게 만들 수 있게 해줌.
// 하나의 박스가 얼마나 공간을 차지할 지 '비율'을 정할 수 있다.
Flexible(
// flex의 기본값은 1임
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
child: Text(
'$totalSeconds',
style: TextStyle(
color: Theme.of(context).cardColor,
fontSize: 89,
fontWeight: FontWeight.w600,
),
),
),
),
Flexible(
flex: 3,
child: Center(
child: IconButton(
iconSize: 120,
color: Theme.of(context).cardColor,
onPressed: onStartPressed,
icon: const Icon(Icons.play_circle_outline),
),
),
),
Flexible(
flex: 1,
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Pomodors',
style: TextStyle(
fontSize: 20,
color: Theme.of(context)
.textTheme
.headlineLarge!
.color,
),
),
Text(
'0',
style: TextStyle(
fontSize: 58,
color: Theme.of(context)
.textTheme
.headlineLarge!
.color,
),
),
],
),
),
),
],
),
),
],
),
);
}
}
반응형
'앱 만들기 프로젝트 > Flutter' 카테고리의 다른 글
| Flutter - 5.3 Date Format (0) | 2024.11.20 |
|---|---|
| Flutter - 5.2 Pause Play (0) | 2024.11.19 |
| Flutter - 5.0 User Interface (0) | 2024.11.13 |
| Flutter - 4.4 Widget Lifecycle (1) | 2024.10.27 |
| Flutter - 4.3 BuildContext (0) | 2024.10.27 |