[flutter] 플러터 Riverpod를 사용하여 앱에 동영상 플레이어 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 고품질의 앱을 빠르게 개발할 수 있게 해줍니다. 이번에는 Riverpod라는 상태 관리 라이브러리를 사용하여 플러터 앱에 동영상 플레이어 기능을 추가하는 방법에 대해 알아보겠습니다.

Riverpod란?

Riverpod는 플러터의 Provider 패키지를 확장한 상태 관리 라이브러리입니다. Provider 패키지는 앱의 상태를 관리하여 필요한 부분에서 해당 상태에 접근할 수 있도록 도와주는 역할을 합니다. Riverpod는 이러한 Provider 패키지를 보다 효과적으로 사용할 수 있게 해줍니다.

동영상 플레이어 기능 추가하기

pubspec.yaml 파일에서 video_player 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter

  video_player: ^2.2.0

main.dart 파일의 상단에 다음과 같은 import 문을 추가합니다.

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

main.dart 파일의 main() 함수를 다음과 같이 수정합니다.

void main() {
  runApp(ProviderScope(child: MyApp()));
}

main.dart 파일에 MyApp 위젯을 생성합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VideoPlayerPage(),
    );
  }
}

main.dart 파일에 VideoPlayerPage 위젯을 생성합니다.

class VideoPlayerPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final videoPlayerController = watch(videoPlayerProvider);
    final bool isPlaying = videoPlayerController.value.isPlaying;

    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: VideoPlayer(videoPlayerController),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          isPlaying ? videoPlayerController.pause() : videoPlayerController.play();
        },
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

main.dart 파일의 최하단에 다음과 같은 코드를 추가합니다.

final videoPlayerProvider = Provider<VideoPlayerController>((ref) {
  return VideoPlayerController.network('https://example.com/video.mp4')
    ..initialize().then((_) {
      ref.maintainState = true;
      ref.onDispose(() => videoPlayerProvider.dispose());
    });
});

extension VideoPlayerProviderX on ProviderContainer {
  void dispose() {
    read(videoPlayerProvider).dispose();
  }
}

앱을 실행하고 동영상 플레이어가 나타나는지 확인해보세요. ‘재생’ 버튼을 눌러 동영상을 재생하고, ‘일시정지’ 버튼을 눌러 재생을 멈출 수 있습니다.

이제 Riverpod를 사용하여 플러터 앱에 동영상 플레이어를 추가하는 방법에 대해 알아보았습니다. Riverpod의 다양한 기능을 활용하여 복잡한 앱을 효과적으로 개발할 수 있습니다. 추가적으로 상태 관리에 대해 더 자세한 정보를 찾으시려면 Riverpod 공식 문서를 참고하시기 바랍니다.