[flutter] 플러터 프로바이더를 사용하여 배경 음악 재생하기

22 Dec 2023

flutter

Flutter 애플리케이션에서 배경 음악을 재생하려면 일반적으로 provider 패키지를 사용하여 글로벌 상태를 관리합니다. 이 포스트에서는 provider를 사용하여 Flutter 앱에서 배경 음악을 재생하는 방법에 대해 소개하겠습니다.

1. 음악 플레이어 클래스 생성

assets_audio_player 패키지를 사용하여 기본적인 음악 플레이어 클래스를 생성합니다. 이 클래스는 음악을 제어하고 재생할 수 있도록 도와줍니다.

import 'package:assets_audio_player/assets_audio_player.dart';

class BackgroundMusicPlayer {
  final assetsAudioPlayer = AssetsAudioPlayer();

  void play() {
    assetsAudioPlayer.open(
      Audio('assets/background_music.mp3'),
      showNotification: true,
      loopMode: LoopMode.single,
    );
  }

  void stop() {
    assetsAudioPlayer.stop();
  }
}

2. Provider를 사용하여 음악 플레이어 제공

이제 provider를 사용하여 애플리케이션 전체에서 사용할 수 있는 음악 플레이어 인스턴스를 제공합니다.

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

class BackgroundMusicProvider extends ChangeNotifier {
  final _backgroundMusicPlayer = BackgroundMusicPlayer();

  void play() {
    _backgroundMusicPlayer.play();
    notifyListeners();
  }

  void stop() {
    _backgroundMusicPlayer.stop();
    notifyListeners();
  }
}

3. Provider 위젯 구성

이제 provider 패키지의 ChangeNotifierProvider를 사용하여 위에서 만든 BackgroundMusicProvider를 앱에 제공합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'background_music_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => BackgroundMusicProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 앱의 나머지 부분을 작성합니다.
    );
  }
}

4. Flutter 위젯에서 Provider 사용

이제 앱의 어떤 화면이든 배경 음악을 제어할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'background_music_provider.dart';

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final backgroundMusicProvider = Provider.of<BackgroundMusicProvider>(context, listen: false);

    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            backgroundMusicProvider.play();
          },
          child: Text('Play Background Music'),
        ),
        ElevatedButton(
          onPressed: () {
            backgroundMusicProvider.stop();
          },
          child: Text('Stop Background Music'),
        ),
      ],
    );
  }
}

이제 Flutter 앱에서 배경 음악을 제어하는 방법을 알았습니다. provider 패키지를 사용하여 음악 플레이어를 전역으로 관리하고, 위젯에서 쉽게 사용할 수 있습니다.

더 많은 정보를 원하시면 assets_audio_player 패키지 및 provider 패키지 공식 문서를 참고하세요.