이번 포스트에서는 Flutter에서 커퍼티노 스테퍼(Cupertino Stepper)와 타이머(Timer)를 함께 사용하는 방법에 대해 알아보겠습니다. 커퍼티노 스테퍼는 iOS 스타일의 스테퍼로, 앱 내에서 값을 증감시키는데 사용됩니다. 타이머는 일정한 시간 간격으로 작업을 수행하거나 반복하는 데 사용됩니다. 이 두 가지를 함께 사용하면 앱에서 일정한 간격으로 값을 변경하거나 업데이트할 수 있습니다.
커퍼티노 스테퍼 생성하기
먼저, 커퍼티노 스테퍼를 생성해보겠습니다. 다음은 간단한 예제 코드입니다.
double value = 0;
CupertinoStepper(
value: value,
onChanged: (newValue) {
setState(() {
value = newValue;
});
},
)
이 코드는 value 변수에 현재 선택된 값이 저장되고, onChanged 콜백 함수를 통해 값이 변경될 때마다 setState를 호출하여 화면을 다시 그립니다. 이렇게 하면 사용자가 스테퍼를 조작할 때마다 value 변수의 값이 업데이트되고, 그에 따라 화면이 반영됩니다.
타이머 구현하기
이제 타이머를 구현해보겠습니다. 타이머를 사용하려면 Timer.periodic 메서드를 사용하여 주기적으로 작업을 수행할 수 있습니다. 예를 들어, 아래 코드는 1초마다 value 변수를 1씩 증가시키는 예제입니다.
Timer timer;
double value = 0;
void startTimer() {
timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
setState(() {
value++;
});
});
}
void stopTimer() {
timer.cancel();
}
이 코드에서는 startTimer 함수에서 Timer.periodic 메서드를 호출하여 1초마다 value 변수를 갱신하고, stopTimer 함수에서 타이머를 멈춥니다.
커퍼티노 스테퍼와 타이머 함께 사용하기
이제 커퍼티노 스테퍼와 타이머를 함께 사용해보겠습니다. 다음은 커퍼티노 스테퍼로 값을 조정하면서 타이머를 시작하고 멈추는 예제 코드입니다.
Timer timer;
double value = 0;
void startTimer() {
timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
setState(() {
value++;
});
});
}
void stopTimer() {
timer.cancel();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
CupertinoStepper(
value: value,
onChanged: (newValue) {
setState(() {
value = newValue;
});
},
),
RaisedButton(
onPressed: startTimer,
child: Text('Start Timer'),
),
RaisedButton(
onPressed: stopTimer,
child: Text('Stop Timer'),
),
],
);
}
이 예제에서는 컬럼(Column) 위젯 안에 커퍼티노 스테퍼와 “Start Timer” 및 “Stop Timer” 버튼이 있는 위젯 트리를 생성합니다. 버튼을 클릭하면 각각 startTimer와 stopTimer 함수가 호출되어 타이머를 시작하거나 멈춥니다.
이제 커퍼티노 스테퍼와 타이머를 함께 사용하는 방법에 대해 알아보았습니다. 이를 응용하여 필요에 맞게 값을 업데이트하고 작업을 수행하는 Flutter 앱을 개발할 수 있습니다.