[flutter] 플러터 Riverpod를 사용하여 앱에 소리 재생 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

Riverpod는 상태 관리 라이브러리이며, Flutter 앱에서 소리 재생 기능을 구현할 때 편리하게 사용할 수 있습니다. 아래는 Riverpod를 사용하여 Flutter 앱에 소리 재생 기능을 추가하는 단계별 방법입니다.

1. 의존성 추가

먼저 pubspec.yaml 파일에서 audioplayers 패키지를 추가해야 합니다. pubspec.yaml 파일 아래에 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^0.19.2
  riverpod: ^1.0.1

패키지 추가 후 터미널에서 flutter pub get을 실행하여 패키지를 가져옵니다.

2. 소리 파일 추가

재생할 소리 파일을 프로젝트에 추가합니다. 이 예제에서는 assets 폴더에 sound.mp3라는 파일을 추가하겠습니다.

3. Provider 생성

lib 폴더에서 새로운 파일을 만들고, sound_provider.dart라고 이름을 지정합니다. 다음 코드를 파일에 추가합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:audioplayers/audioplayers.dart';

final audioPlayerProvider = Provider<AudioPlayer>((ref) {
  return AudioPlayer();
});

class SoundProvider extends StateNotifier<AudioPlayer> {
  SoundProvider() : super(AudioPlayer());

  Future<void> playSound() async {
    state = await ref.read(audioPlayerProvider).play('assets/sound.mp3', isLocal: true);
  }
}

Riverpod에서는 Provider를 사용하여 객체를 생성하고, StateNotifier를 사용하여 상태를 관리합니다. 위의 코드는 AudioPlayer 객체를 생성하고, playSound 메서드를 통해 소리 파일을 재생합니다.

4. 앱에 Provider 추가

main.dart 파일에서 Riverpod에 접근하기 위해 WidgetsFlutterBinding.ensureInitialized();을 추가합니다. 또한, runApp 메서드에서 ProviderScope 위젯으로 앱을 감싸야 합니다. 아래는 main.dart 파일의 예시입니다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'sound_provider.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sound App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Sound App')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              context.read(soundProvider).playSound();
            },
            child: const Text('Play Sound'),
          ),
        ),
      ),
    );
  }
}

여기서 MyApp 위젯에 있는 ElevatedButton 위젯은 소리를 재생하는 버튼입니다. 버튼을 누를 때 playSound 메서드가 호출됩니다.

이제 앱을 실행하고 버튼을 누르면 assets 폴더에 있는 sound.mp3 파일이 재생됩니다.

이렇게 Riverpod를 사용하여 Flutter 앱에 소리 재생 기능을 구현할 수 있습니다. 간단한 예시이지만, 상태 관리와 객체 의존성 주입을 활용하여 보다 복잡한 앱에서도 소리 재생 기능을 사용할 수 있습니다.