[flutter] 플러터 커퍼티노 스테퍼를 이용한 음량 조절 기능 구현하기
이번 글에서는 플러터(Flutter)에서의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 음량 조절 기능을 구현하는 방법에 대해서 알아보겠습니다.
1. 커퍼티노 스테퍼란?
커퍼티노 스테퍼는 iOS 디자인 스타일을 따르는 플러터 위젯입니다. 스텝 단위로 값을 조절할 수 있으며, 주로 숫자나 값에 대한 조절 기능에서 사용됩니다.
2. 커퍼티노 스테퍼 사용하기
우선, 플러터 프로젝트에서 커퍼티노 스테퍼를 사용하기 위해 cupertino_icons 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.
dependencies:
cupertino_icons: ^1.0.2
그리고 해당 패키지를 import 해줍니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
이제 커퍼티노 스테퍼를 통해 음량 조절 기능을 구현해보겠습니다. 아래의 코드를 참고해주세요.
double volume = 0.0;
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('음량 조절'),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('현재 음량: $volume'),
CupertinoStepper(
value: volume,
onChanged: (newValue) {
setState(() {
volume = newValue;
});
},
),
],
),
),
);
}
위 코드에서, volume 변수는 현재 음량 값을 저장하고 있습니다. CupertinoStepper 위젯에서 value 속성으로 현재 값과 onChanged 속성으로 값이 변경될 때의 콜백 함수를 지정해줍니다. 이때, 콜백 함수에서 setState 함수를 호출하여 화면을 다시 그리도록 해야 합니다.
3. 실행 결과 확인하기
위 코드를 플러터 프로젝트에 추가하고 실행하면, iOS 스타일의 커퍼티노 스테퍼가 화면에 나타납니다. 스테퍼를 이용해 값을 변경하면, 현재 음량 값이 업데이트되는 것을 확인할 수 있습니다.
결론
이번 글에서는 플러터에서의 커퍼티노 스테퍼를 이용하여 음량 조절 기능을 구현하는 방법에 대해 알아보았습니다. 커퍼티노 스테퍼를 사용하면 iOS 스타일의 숫자 조절 기능을 쉽게 구현할 수 있습니다.