[flutter] 플러터 Slider를 사용하여 동영상 재생 시간 조절하는 방법은?

08 Dec 2023

flutter

이번 글에서는 Flutter에서 Slider를 사용하여 동영상 재생 시간을 조절하는 방법에 대해 알아보겠습니다.

1. Flutter Video Player 설치

먼저, Flutter 앱에서 동영상을 재생하는 데 사용할 수 있는 플러그인을 설치해야 합니다. 가장 인기 있는 옵션 중 하나는 video_player 패키지입니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  video_player: ^2.2.17

그리고 터미널에서 아래 명령어로 패키지를 설치합니다.

flutter pub get

2. 동영상과 Slider 통합

이제, 동영상 플레이어와 Slider를 통합하여 동영상 재생 시간을 조절할 준비가 되었습니다.

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

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

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;
  // Add a variable to handle the time of video playback
  double _currentTime = 0.0;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
        'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
      ..initialize().then((_) {
        setState(() {
          _controller.play();
        });
      });
    super.initState();
    // Add a listener to update the current time variable
    _controller.addListener(() {
      setState(() {
        _currentTime = _controller.value.position.inSeconds.toDouble();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    ),
                    Slider(
                      value: _currentTime,
                      min: 0.0,
                      max: _controller.value.duration.inSeconds.toDouble(),
                      onChanged: (value) {
                        setState(() {
                          _currentTime = value;
                          _controller.seekTo(Duration(seconds: value.toInt()));
                        });
                      },
                    ),
                  ],
                )
              : CircularProgressIndicator(),
        ),
      ),
    );
  }

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

위의 코드에서는 video_player 패키지를 사용하여 동영상을 재생하고, 이에 대한 현재 재생 시간을 Slider로 표시 및 조절할 수 있도록 구현하였습니다.

이제, 위 코드를 참고하여 동영상 재생 시간을 조절하는 기능을 구현해 보세요!

더 많은 내용 및 세부 설정 방법은 video_player 패키지의 공식 문서를 참고하시기 바랍니다.

그럼 즐거운 코딩 되세요!