[flutter] 플러터 프로바이더를 사용하여 뮤직 플레이어 구현하기

26 Dec 2023

flutter

이번에는 플러터(Flutter) 앱에서 간단한 뮤직 플레이어를 구현하는 방법에 대해 알아보겠습니다. 특히, 이 구현에서는 플러터의 프로바이더(Provider) 패키지를 사용하여 애플리케이션 상태 관리를 효과적으로 수행할 것입니다.

1. 프로바이더(Provider) 패키지란?

프로바이더(Provider)는 플러터에서 상태 관리를 위한 패키지로, 변경 알림 패턴을 활용하여 상태 변화를 추적하고 위젯 트리에 변경 사항을 전달합니다. 이를 통해 효율적으로 상태를 관리할 수 있습니다.

2. 뮤직 플레이어 구현

2.1. 프로바이더 패키지 추가

먼저, pubspec.yaml 파일에 아래와 같이 프로바이더 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

2.2. 상태 관리 클래스 작성

다음으로, 뮤직 플레이어의 상태를 관리하기 위한 프로바이더 클래스를 작성합니다.

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

class MusicPlayerProvider with ChangeNotifier {
  bool _isPlaying = false;

  bool get isPlaying => _isPlaying;

  void togglePlay() {
    _isPlaying = !_isPlaying;
    notifyListeners();
  }
}

2.3. 프로바이더 제공

이 클래스를 위젯 트리에 제공하기 위해 앱의 main.dart 파일에서 ChangeNotifierProvider를 사용하여 프로바이더를 제공합니다.

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

2.4. 위젯에서 상태 사용

이제 뮤직 플레이어 화면의 위젯에서 프로바이더의 상태를 사용하여 UI를 업데이트할 수 있습니다.

class MusicPlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var playerProvider = Provider.of<MusicPlayerProvider>(context);

    return Scaffold(
      body: Center(
        child: IconButton(
          icon: Icon(
            playerProvider.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
          onPressed: () {
            playerProvider.togglePlay();
          },
        ),
      ),
    );
  }
}

마치며

이제 프로바이더를 사용하여 플러터 앱에서 간단한 뮤직 플레이어를 구현하는 방법에 대해 알아보았습니다. 프로바이더를 통해 상태 관리를 효율적으로 수행할 수 있으며, 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다.

더 많은 내용을 학습하고 싶다면 프로바이더 패키지 문서를 참고해보세요.