[flutter] 플러터(Flutter)와 비디오 플레이어의 연동

18 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때, 사용자들이 동영상을 간편하게 시청할 수 있도록 비디오 플레이어를 통합하는 것이 중요합니다.

이번 블로그 포스트에서는 플러터(Flutter) 앱에서 비디오 플레이어를 연동하는 방법을 살펴보겠습니다.

필요한 패키지 설치하기

우선, 비디오 플레이어를 사용하기 위해 video_player 패키지를 설치해야 합니다.

flutter pub add video_player

비디오 플레이어 사용하기

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

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  const VideoApp({Key? key}) : super(key: key);
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://www.example.com/sample.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Video Example'),
        ),
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : CircularProgressIndicator(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              if (_controller.value.isPlaying) {
                _controller.pause();
              } else {
                _controller.play();
              }
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

위 코드는 비디오 플레이어를 사용하여 네트워크에 있는 비디오를 화면에 출력하고, 플레이/일시정지 버튼을 구현한 예제입니다.

이렇게 플러터(Flutter)에서 비디오 플레이어를 연동하여 동영상을 플레이할 수 있습니다.

더 자세한 내용은 공식 비디오 플레이어 문서를 참고할 수 있습니다.