[flutter] 플러터 스택드 위젯에서 비디오 플레이어 추가하는 방법

15 Dec 2023

flutter

플러터로 앱을 개발할 때, 비디오 플레이어를 스택 위젯에 추가하는 방법이 궁금할 수 있습니다. 스택 위젯을 사용하면 여러 위젯을 겹쳐서 표시할 수 있어, 비디오 플레이어와 다른 위젯을 함께 화면에 표시할 수 있습니다.

1. 비디오 플레이어 패키지 가져오기

가장 먼저, 비디오 플레이어 패키지를 가져와야 합니다. 플러터에서는 다양한 비디오 플레이어 패키지를 제공하므로, 원하는 기능과 UI에 맞는 패키지를 선택할 수 있습니다. 대표적으로 video_player 패키지가 있습니다.

dependencies:
  video_player: ^2.2.12

pubspec.yaml 파일에 위와 같이 패키지를 추가한 후, flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

2. 비디오 플레이어 추가하기

다음으로, 비디오 플레이어를 위한 위젯을 생성하고, 스택 위젯에 추가합니다. 일반적으로 VideoPlayer 위젯을 사용하여 비디오를 플레이하고, Stack 위젯을 사용하여 다른 위젯들과 겹쳐서 표시할 수 있습니다.

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

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

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

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

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('videos/sample.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Center(
              child: _controller.value.isInitialized
                  ? AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    )
                  : Container(),
            ),
            // Add other widgets as needed
          ],
        ),
      ),
    );
  }

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

위 코드에서는 video_player 패키지의 VideoPlayerController를 사용하여 비디오를 초기화하고 플레이어를 생성한 후, 스택 위젯에 추가하였습니다. 또한, AspectRatio 위젯을 사용하여 비디오의 측면 비율을 유지하면서 화면에 표시하였습니다.

결론

플러터에서는 스택 위젯을 사용하여 다양한 위젯을 겹쳐서 표시할 수 있습니다. 이를 활용하여 비디오 플레이어와 다른 위젯을 함께 화면에 표시할 수 있습니다. 위의 예시 코드를 참고하여 원하는 비디오 플레이어를 추가해 보세요.

참고 자료:

Flutter video_player 패키지: https://pub.dev/packages/video_player