플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 플랫폼 간 공통 코드를 작성할 수 있어 개발 생산성을 높이고, 핫 리로드(Hot Reload) 기능으로 신속한 개발 환경을 제공합니다. 이번 예시에서는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 배경 음악의 볼륨을 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.
1. 커퍼티노 스테퍼 위젯 추가하기
먼저, 플러터 프로젝트에 cupertino_icons 패키지를 추가해줍니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.0
그리고, 다음과 같이 main.dart 파일에서 CupertinoApp 위젯으로 앱을 생성하고, CupertinoScaffold 위젯을 사용하여 기본적인 레이아웃을 구성합니다:
import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Music Player'),
),
child: Center(
child: CupertinoStepper(
onValueChanged: (newValue) {
// 볼륨 값 변경 시 호출되는 콜백 함수
},
),
),
),
);
}
}
CupertinoStepper 위젯은 인터페이스에서 숫자 값을 증감시키기 위해 사용되는 컨트롤을 제공합니다. CupertinoStepper의 onValueChanged 콜백 함수는 볼륨 값을 변경할 때 호출됩니다.
2. 배경 음악 볼륨 값을 관리하기
다음으로, 배경 음악의 볼륨 값을 상태로 관리해야 합니다. MyAppState 클래스에 volume라는 double 타입의 변수를 추가하고, CupertinoStepper의 onValueChanged 콜백 함수에서 volume 값을 업데이트합니다:
import 'package:flutter/cupertino.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double volume = 0.5;
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Music Player'),
),
child: Center(
child: CupertinoStepper(
value: volume,
onValueChanged: (newValue) {
setState(() {
volume = newValue;
});
},
),
),
),
);
}
}
FloatingActionButton 위젯을 통해 배경 음악을 재생하거나 일시정지할 경우, volume 값을 사용하여 음악의 볼륨을 조절할 수 있습니다.
3. 앱 실행해보기
이제 앱을 실행해보면, 상단 부분에 네비게이션 바가 있고, 가운데에 CupertinoStepper 위젯이 표시됩니다. CupertinoStepper의 value 프로퍼티로 설정한 volume 값에 따라 스테퍼가 표시되는 것을 확인할 수 있습니다. 스테퍼를 조작하면 onValueChanged 콜백이 호출되며, volume 값이 업데이트됩니다.
이처럼 플러터의 커퍼티노 스테퍼를 사용하면 간단하게 배경 음악의 볼륨 조절 기능을 구현할 수 있습니다.