[flutter] 플러터에서의 bloc 패턴으로 동영상 재생 기능 구현하기

20 Dec 2023

flutter

Flutter에서 앱을 개발할 때 Bloc (Business Logic Component) 패턴을 사용하여 동영상 재생 기능을 구현할 수 있습니다. Bloc 패턴은 앱의 비즈니스 로직과 UI를 분리하여 관리할 수 있는 강력한 도구입니다. 이번 포스트에서는 Flutter 및 Bloc 패턴을 사용하여 동영상 재생 기능을 구현하는 방법에 대해 알아보겠습니다.

1. Bloc 패턴 소개

Bloc 패턴은 비즈니스 로직을 UI로부터 분리하여 상태를 관리하고, 사용자 입력에 따라 적절한 행동을 취할 수 있도록 하는 디자인 패턴입니다. Flutter에서는 flutter_bloc 패키지를 사용하여 Bloc 패턴을 쉽게 구현할 수 있습니다.

2. 동영상 재생 기능 구현

2.1 비디오 플레이어 플러그인 사용

동영상을 재생하기 위해서는 video_player 플러그인을 사용할 수 있습니다. 이 플러그인은 Flutter 앱에서 동영상을 쉽게 재생할 수 있도록 해줍니다. 먼저 pubspec.yaml 파일에 다음과 같이 video_player 패키지를 추가하세요.

dependencies:
  video_player: ^2.3.7

2.2 Bloc 구현

동영상을 재생하기 위한 Bloc을 구현해보겠습니다. Bloc은 비디오의 상태를 추적하고, 사용자 입력에 따라 비디오를 제어하는 데 사용될 것입니다.

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

enum VideoPlayerEvent { play, pause, stop }

class VideoPlayerBloc extends Bloc<VideoPlayerEvent, VideoPlayerController> {
  VideoPlayerBloc() : super(VideoPlayerController.network('VIDEO_URL'));

  @override
  Stream<VideoPlayerController> mapEventToState(VideoPlayerEvent event) async* {
    switch (event) {
      case VideoPlayerEvent.play:
        yield state..play();
        break;
      case VideoPlayerEvent.pause:
        yield state..pause();
        break;
      case VideoPlayerEvent.stop:
        yield state..pause();
        yield state..seekTo(Duration.zero);
        break;
    }
  }
}

2.3 UI에서 Bloc 사용

마지막으로, UI에서 이 Bloc을 사용하여 동영상을 제어하는 버튼을 만들어 보겠습니다.

class VideoPlayerScreen extends StatelessWidget {
  final VideoPlayerBloc videoPlayerBloc = VideoPlayerBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (context) => videoPlayerBloc,
        child: BlocBuilder<VideoPlayerBloc, VideoPlayerController>(
          builder: (context, videoPlayerController) {
            return Center(
              child: AspectRatio(
                aspectRatio: videoPlayerController.value.aspectRatio,
                child: VideoPlayer(videoPlayerController),
              ),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              videoPlayerBloc.add(VideoPlayerEvent.play);
            },
            child: Icon(Icons.play_arrow),
          ),
          FloatingActionButton(
            onPressed: () {
              videoPlayerBloc.add(VideoPlayerEvent.pause);
            },
            child: Icon(Icons.pause),
          ),
          FloatingActionButton(
            onPressed: () {
              videoPlayerBloc.add(VideoPlayerEvent.stop);
            },
            child: Icon(Icons.stop),
          ),
        ],
      ),
    );
  }
}

위의 코드는 Bloc 패턴과 video_player 플러그인을 사용하여 Flutter 앱에서 동영상을 재생하는 방법을 보여줍니다.

이제 Bloc 패턴을 사용하여 동영상을 관리하고 제어하는 방법을 알게 되었습니다. Bloc은 Flutter 앱에서 비즈니스 로직을 관리하는 데 유용한 도구이며, 동영상 재생과 같이 상태를 관리해야 하는 기능을 구현할 때 매우 유용하게 활용될 수 있습니다.