[flutter] 플러터에서 bloc 패턴을 사용하여 음악 재생 기능 구현하기

20 Dec 2023

flutter

음악 재생과 관련된 기능을 구현할 때, bloc 패턴은 상태 및 이벤트를 관리하는 데 효과적인 방법입니다. 이번 포스트에서는 플러터에서 bloc 패턴을 사용하여 음악을 재생하고 일시 정지하는 간단한 앱을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, 플러터 프로젝트를 생성하고, bloc 및 equatable 라이브러리를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter_bloc: ^7.0.0
  equatable: ^2.0.2

의존성을 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

2. Bloc 및 Event 클래스 생성

음악 재생을 관리하기 위한 bloc 및 event 클래스를 생성합니다.

import 'package:equatable/equatable.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// Event 클래스
abstract class MusicEvent extends Equatable {}

class PlayMusic extends MusicEvent {
  @override
  List<Object?> get props => [];
}

class PauseMusic extends MusicEvent {
  @override
  List<Object?> get props => [];
}

// Bloc 클래스
class MusicBloc extends Bloc<MusicEvent, bool> {
  MusicBloc() : super(false);

  @override
  Stream<bool> mapEventToState(MusicEvent event) async* {
    if (event is PlayMusic) {
      yield true;
    } else if (event is PauseMusic) {
      yield false;
    }
  }
}

3. 화면 구성

음악 재생을 제어하기 위한 화면을 구성합니다.

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

class MusicPlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Music Player'),
      ),
      body: BlocProvider(
        create: (context) => MusicBloc(),
        child: MusicPlayer(),
      ),
    );
  }
}

class MusicPlayer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MusicBloc, bool>(
      builder: (context, isPlaying) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
                onPressed: () {
                  context.read<MusicBloc>().add(
                    isPlaying ? PauseMusic() : PlayMusic(),
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  }
}

4. 동작 테스트

위의 코드를 작성한 후, 앱을 빌드하여 동작을 테스트합니다.

이제 플러터에서 bloc 패턴을 사용하여 음악 재생 기능을 구현할 수 있습니다. 플러터의 강력한 상태 관리와 bloc 패턴을 활용하여 복잡한 앱을 구축하는 데 도움이 될 것입니다.

참고: Flutter Bloc 라이브러리