[flutter] 플러터 커퍼티노 스테퍼를 이용한 배경음악 볼륨 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크입니다. 이번 글에서는 플러터의 Cupertino 스타일의 스테퍼(stepper)를 사용하여 배경음악의 볼륨 조절 기능을 구현하는 방법에 대해 알아보겠습니다.

스테퍼(Stepper) 위젯이란?

스테퍼(Stepper) 위젯은 값을 증가 또는 감소시킬 수 있는 컨트롤을 제공하는 위젯입니다. Cupertino 스타일의 스테퍼는 iOS 디자인 가이드라인에 맞춰 디자인된 스타일을 사용합니다.

배경음악 볼륨 조절 기능 구현하기

먼저, 프로젝트에 cupertino_icons 패키지를 추가해줍니다. pubspec.yaml 파일을 열어 아래와 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

이제 main.dart 파일을 열어 아래의 코드를 작성합니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Music Player',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Music Player'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double volume = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              child: Icon(CupertinoIcons.play),
              onPressed: () {
                // 배경음악 재생
              },
            ),
            SizedBox(height: 20),
            Text(
              'Volume Control',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 10),
            CupertinoSlider(
              value: volume,
              onChanged: (value) {
                setState(() {
                  volume = value;
                  // 배경음악 볼륨 조절
                });
              },
            ),
            SizedBox(height: 10),
            Text(
              'Current Volume: ${volume.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 MyHomePage 위젯에서 배경음악 재생을 위한 버튼과 볼륨 조절을 위한 스테퍼를 구현하였습니다. 버튼을 누르면 배경음악이 재생되도록 로직을 구현해야 합니다. 또한, 스테퍼의 값을 변경할 때마다 setState를 호출하여 상태를 업데이트하고, 배경음악의 볼륨을 조절해야 합니다.

마지막으로, 앱을 실행해보면 배경음악을 재생할 수 있는 버튼과 볼륨을 조절할 수 있는 스테퍼가 나타나는 것을 확인할 수 있습니다. 스테퍼를 조절할 때마다 현재 볼륨의 값을 텍스트로 표시하여 사용자에게 시각적인 피드백을 제공합니다.

결론

이번 글에서는 플러터의 Cupertino 스타일 스테퍼를 이용하여 배경음악의 볼륨을 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 스테퍼를 사용하여 다양한 값을 조절하는 기능을 구현할 수 있으니 참고하시길 바랍니다.