[flutter] 플러터 커퍼티노 스테퍼를 이용한 소리 재생 시간 조절 기능 구현하기

05 Dec 2023

flutter

이번 예시에서는 Flutter 앱에서 플레이어의 소리 재생 시간을 조절할 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다. 실제로 플레이어를 구현하기보다는, 플러터의 CupertinoSlider와 CupertinoStepper 위젯을 사용하여 시간 조절 기능을 구현하는 방법을 살펴볼 예정입니다.

1. 프로젝트 설정

새로운 Flutter 프로젝트를 생성합니다. 만약 기존의 프로젝트가 있다면, 해당 프로젝트를 열어도 무방합니다.

2. 화면 구성

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: 'Sound Player',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SoundPlayerScreen(),
    );
  }
}

class SoundPlayerScreen extends StatefulWidget {
  @override
  _SoundPlayerScreenState createState() => _SoundPlayerScreenState();
}

class _SoundPlayerScreenState extends State<SoundPlayerScreen> {
  double _playbackDuration = 5.0;

  void setPlaybackDuration(double duration) {
    setState(() {
      _playbackDuration = duration;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sound Player'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: 16.0),
            Text(
              'Playback Duration: $_playbackDuration seconds',
              style: TextStyle(fontSize: 16.0),
            ),
            SizedBox(height: 16.0),
            CupertinoSlider(
              value: _playbackDuration,
              min: 0.0,
              max: 10.0,
              divisions: 10,
              onChanged: (double value) {
                setPlaybackDuration(value);
              },
            ),
            SizedBox(height: 16.0),
            CupertinoStepper(
              value: _playbackDuration,
              min: 0.0,
              max: 10.0,
              onChanged: (double value) {
                setPlaybackDuration(value);
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 SoundPlayerScreen 위젯에 _playbackDuration 변수를 추가하여 재생 시간을 저장하고 화면에 표시합니다. CupertinoSlider와 CupertinoStepper 위젯을 사용하여 재생 시간을 조절할 수 있도록 구성하였습니다.

3. 실행 및 확인

위 코드를 작성한 후에 앱을 실행하면, 재생 시간을 조절할 수 있는 슬라이더와 스테퍼가 화면에 나타납니다. 손쉽게 재생 시간을 조절해볼 수 있습니다.

결론

이번 예시에서는 Flutter의 커퍼티노 스타일 위젯인 CupertinoSlider와 CupertinoStepper를 활용하여 소리 재생 시간을 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 이 예시를 참고하여 자신만의 플레이어를 구현해보세요.