[flutter] 플러터 커퍼티노 스테퍼를 이용한 뮤직 플레이어 속도 조절 기능 구현하기

05 Dec 2023

flutter

이번 포스트에서는 Flutter 애플리케이션에서 플레이어의 재생 속도를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다. 이를 위해 플러터의 Cupertino 스테퍼 위젯을 사용하겠습니다.

예제 코드

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

class MusicPlayerPage extends StatefulWidget {
  @override
  _MusicPlayerPageState createState() => _MusicPlayerPageState();
}

class _MusicPlayerPageState extends State<MusicPlayerPage> {
  double _playbackSpeed = 1.0;

  void _changePlaybackSpeed(double value) {
    setState(() {
      _playbackSpeed = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Music Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Playback Speed: $_playbackSpeed',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            CupertinoSlider(
              min: 0.5,
              max: 2.0,
              divisions: 6,
              value: _playbackSpeed,
              onChanged: _changePlaybackSpeed,
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 플레이어 페이지를 나타내는 MusicPlayerPage 위젯을 정의합니다. 위젯의 상태 클래스 _MusicPlayerPageState 에서는 _playbackSpeed 변수를 사용하여 현재 재생 속도를 추적합니다.

또한, _changePlaybackSpeed 메서드를 사용하여 재생 속도를 변경할 수 있도록 구현했습니다. 이 메서드는 setState 함수를 호출하여 상태를 업데이트하고 화면을 다시 그립니다.

위젯의 build 메서드에서는 Text 위젯을 사용하여 현재 재생 속도를 나타내고, CupertinoSlider 위젯을 사용하여 재생 속도를 조절할 수 있는 슬라이더를 구현했습니다.

사용 방법

위의 예제 코드를 사용하여 Flutter 애플리케이션에서 뮤직 플레이어 페이지를 만들고, MusicPlayerPage 위젯을 호출하는 방식으로 해당 기능을 구현할 수 있습니다.

CupertinoSlider 위젯의 min과 max 속성을 사용하여 재생 속도의 최소값과 최대값을 지정하고, divisions 속성을 사용하여 슬라이더의 구간 수를 정의할 수 있습니다. 또한 value 속성을 통해 슬라이더의 초기값을 설정할 수 있습니다.

onChanged 속성에는 _changePlaybackSpeed 메서드를 지정하여 슬라이더 값이 변경될 때마다 재생 속도를 업데이트하도록 합니다.

결론

플러터의 CupertinoSlider 위젯을 사용하여 뮤직 플레이어 애플리케이션에서 재생 속도를 조절하는 기능을 구현하는 방법을 살펴보았습니다. 이를 통해 사용자는 원하는 속도로 음악을 재생할 수 있으며, 애플리케이션의 다양한 기능을 제공할 수 있게 됩니다.

참고 자료

Flutter Documentation - CupertinoSlider