[flutter] BottomSheet에서 동영상 재생하기

14 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 BottomSheet에 동영상을 재생하는 방법에 대해 알아보겠습니다.

1. BottomSheet 생성하기

먼저, BottomSheet를 만들고 원하는 위치에서 화면에 표시합니다.

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        child: // 동영상을 재생하는 위젯 추가
      );
    },
  );
}

2. 동영상 재생하기

동영상을 재생하려면 video_player 패키지를 사용해야 합니다. 프로젝트의 pubspec.yaml 파일에 다음을 추가하여 패키지를 가져옵니다.

dependencies:
  video_player: ^2.1.11

그리고 패키지를 가져온 후, 아래와 같이 사용하여 동영상을 재생할 수 있습니다.

import 'package:video_player/video_player.dart';

class VideoPlayerWidget extends StatefulWidget {
  final String videoUrl;

  VideoPlayerWidget({required this.videoUrl});

  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.videoUrl)
      ..initialize().then((_) {
        // 동영상이 준비되면 재생 시작
        _controller.play();
      });
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    );
  }

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

3. BottomSheet에 동영상 재생 위젯 추가하기

이제 BottomSheet에 동영상을 재생하는 위젯을 추가하겠습니다.

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        child: VideoPlayerWidget(videoUrl: '동영상 URL'),
      );
    },
  );
}

이제 Flutter 앱에서 BottomSheet에 동영상을 재생할 수 있게 되었습니다. 이를 통해 사용자에게 편의성을 제공할 수 있습니다.

더 자세한 내용은 video_player 패키지의 공식 문서를 참고해 주세요.

참고: 이 예제에서는 네트워크 동영상을 사용하였으나, 로컬 동영상 파일 또한 비슷한 방식으로 재생할 수 있습니다.

이상으로 Flutter에서 BottomSheet에서 동영상을 재생하는 방법에 대해 알아보았습니다. 부디 도움이 되길 바라며, 더 궁금한 점이 있다면 언제든지 물어주세요!