[flutter] 플러터에서의 Swipeable 동영상 일시 정지 처리 방법

08 Dec 2023

flutter

플러터를 사용하여 Swipeable 동영상 플레이어를 구현했을 때, 사용자가 동영상을 스와이프하면 일시적으로 동영상을 일시 정지(pause)할 수 있는 기능을 구현하는 방법을 알아보겠습니다.

Swipeable 동영상 플레이어 구현

먼저, video_player 패키지를 사용하여 기본적인 동영상 플레이어를 구현합니다. 이후, flutter_swiper나 PageView와 같은 라이브러리를 사용하여 Swipeable한 화면 전환 기능을 추가합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipeable Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
    );
  }

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

Swipe로 일시 정지 기능 추가

flutter_swipe_detector를 사용하여 Swipe 동작을 감지하고, 이를 토대로 동영상을 일시 정지하는 기능을 구현할 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipeable Video Player'),
      ),
      body: Center(
        child: SwipeDetector(
          onSwipeUp: () {
            _controller.play();
          },
          onSwipeDown: () {
            _controller.pause();
          },
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : CircularProgressIndicator(),
        ),
      ),
    );
  }

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

위의 코드는 flutter_swipe_detector 패키지를 사용하여 Swipe 동작을 감지하고, Swipe Up 이벤트에는 동영상을 재생하도록 하고, Swipe Down 이벤트에는 동영상을 일시 정지하도록 구현한 예시입니다.

이제 여러분은 Swipeable한 동영상 플레이어를 구현하고, 사용자의 Swipe 동작에 따라 동영상을 일시 정지하는 기능을 추가할 수 있을 것입니다.

더 자세한 정보는 flutter_swipe_detector 패키지 문서를 참고해 주세요.