Flutter에서 배경 동영상(Background Video) 설정하기

배경 동영상(Background Video)은 앱의 분위기와 사용자 경험을 크게 향상시키는 요소로, 로그인 화면, 시작 화면, 대시보드 등 다양한 UI에 적용할 수 있습니다. Flutter에서는 배경 동영상을 설정하는 방법으로 video_player 패키지를 많이 사용합니다. 이번 글에서는 Flutter에서 배경 동영상을 설정하는 방법과 관련 옵션들을 살펴보겠습니다.

1. video_player 패키지 설치하기

Flutter에서 동영상을 재생하려면 video_player 패키지를 사용해야 합니다. 이 패키지를 설치하고 설정을 완료한 후 배경 동영상을 쉽게 추가할 수 있습니다.

1.1 pubspec.yaml에 패키지 추가

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.4.0  # 최신 버전으로 설정

설정 후 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

1.2 Android와 iOS 설정

Android와 iOS에서 video_player 패키지를 사용하려면 추가 설정이 필요합니다.

• Android: AndroidManifest.xml 파일에 인터넷 권한을 추가합니다.

<uses-permission android:name="android.permission.INTERNET"/>

• iOS: iOS의 경우 추가 설정이 필요하지 않습니다.

2. 배경 동영상 설정하기

배경 동영상을 설정하려면 Stack 위젯을 사용하여 동영상을 화면 전체에 배치하고, 그 위에 UI 요소들을 겹치면 됩니다. 아래 예제는 기본적인 배경 동영상 설정 방법을 보여줍니다.

2.1 기본 배경 동영상 설정 예제

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: BackgroundVideoScreen(),
    );
  }
}

class BackgroundVideoScreen extends StatefulWidget {
  @override
  _BackgroundVideoScreenState createState() => _BackgroundVideoScreenState();
}

class _BackgroundVideoScreenState extends State<BackgroundVideoScreen> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset("assets/background_video.mp4")
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
        _controller.setLooping(true);
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: _controller.value.isInitialized
                ? VideoPlayer(_controller)
                : Container(color: Colors.black),
          ),
          Center(
            child: Text(
              "Welcome",
              style: TextStyle(fontSize: 32, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

• VideoPlayerController.asset: 로컬에 저장된 동영상을 불러오기 위해 사용합니다. 로컬 동영상은 pubspec.yaml에 등록해야 합니다.
• _controller.play(): 동영상이 화면에 보이자마자 재생되도록 설정합니다.
• _controller.setLooping(true): 동영상을 무한 반복하여 끊김 없이 배경으로 사용할 수 있도록 합니다.

이 예제는 assets/background_video.mp4 파일을 배경 동영상으로 설정하고, 텍스트를 화면 중앙에 배치합니다.

 

주의사항

동영상 파일을 사용할 때는 pubspec.yaml에 경로를 등록해야 합니다.

flutter:
  assets:
    - assets/background_video.mp4

 

반응형

 

3. 네트워크 동영상 배경 설정하기

배경 동영상을 로컬이 아닌 네트워크에서 불러오는 경우에는 VideoPlayerController.network를 사용하여 동영상을 설정할 수 있습니다.

네트워크 동영상 배경 설정 예제

class NetworkBackgroundVideoScreen extends StatefulWidget {
  @override
  _NetworkBackgroundVideoScreenState createState() =>
      _NetworkBackgroundVideoScreenState();
}

class _NetworkBackgroundVideoScreenState
    extends State {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        "https://example.com/background_video.mp4")
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
        _controller.setLooping(true);
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: _controller.value.isInitialized
                ? VideoPlayer(_controller)
                : Container(color: Colors.black),
          ),
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Network Background Video",
                  style: TextStyle(fontSize: 32, color: Colors.white),
                ),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {},
                  child: Text("Get Started"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

• VideoPlayerController.network: 네트워크에서 동영상을 불러와 배경으로 설정합니다.
• 인터넷 권한: 네트워크 동영상 재생을 위해 Android의 경우 AndroidManifest.xml에 인터넷 권한을 추가해야 합니다.

이 코드는 네트워크에서 동영상을 배경으로 설정하고, 버튼과 텍스트를 배치하여 사용자에게 필요한 동작을 유도합니다.

4. 동영상 위에 오버레이 효과 추가하기

배경 동영상에 오버레이를 추가하여 동영상이 너무 선명하게 보이지 않도록 조정할 수 있습니다. Colors.black.withOpacity를 사용하여 동영상에 반투명한 오버레이를 겹칠 수 있습니다.

오버레이 추가 예제

Stack(
  children: [
    Positioned.fill(
      child: _controller.value.isInitialized
          ? VideoPlayer(_controller)
          : Container(color: Colors.black),
    ),
    Positioned.fill(
      child: Container(
        color: Colors.black.withOpacity(0.5),  // 오버레이 추가
      ),
    ),
    Center(
      child: Text(
        "Overlay Example",
        style: TextStyle(fontSize: 32, color: Colors.white),
      ),
    ),
  ],
),

• Container(color: Colors.black.withOpacity(0.5)): 동영상 위에 반투명한 검정색 레이어를 추가하여 오버레이 효과를 줍니다.

이 예제는 동영상에 50% 투명도의 검정색 오버레이를 추가하여 텍스트가 더 명확하게 보이도록 합니다.

 

 

728x90

 

5. 배경 동영상 제어하기

배경 동영상을 재생, 일시정지 또는 초기화하는 방법을 추가하여 앱에서 동영상 재생을 제어할 수 있습니다. 예를 들어, 사용자가 버튼을 눌러 동영상을 일시정지하거나 다시 재생할 수 있도록 합니다.

배경 동영상 제어 예제

class ControllableBackgroundVideoScreen extends StatefulWidget {
  @override
  _ControllableBackgroundVideoScreenState createState() =>
      _ControllableBackgroundVideoScreenState();
}

class _ControllableBackgroundVideoScreenState
    extends State<ControllableBackgroundVideoScreen> {
  late VideoPlayerController _controller;
  bool isPlaying = true;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset("assets/background_video.mp4")
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
        _controller.setLooping(true);
      });
  }

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

  void _togglePlayPause() {
    setState(() {
      if (isPlaying) {
        _controller.pause();
      } else {
        _controller.play();
      }
      isPlaying = !isPlaying;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: _controller.value.isInitialized
                ? VideoPlayer(_controller)
                : Container(color: Colors.black),
          ),
          Center(
            child: ElevatedButton(
              onPressed: _togglePlayPause,
              child: Text(isPlaying ? "Pause" : "Play"),
            ),
          ),
        ],
      ),
    );
  }
}

• 재생 상태 확인: isPlaying 변수를 사용하여 동영상이 현재 재생 중인지 여부를 확인합니다.
• _togglePlayPause: 재생 및 일시정지 기능을 버튼으로 제어할 수 있도록 설정합니다.

이 예제는 버튼을 눌러 동영상을 일시정

지하거나 다시 재생할 수 있는 제어 기능을 제공합니다.

결론

Flutter에서 배경 동영상을 설정하는 것은 video_player 패키지를 통해 매우 간단하게 구현할 수 있습니다. 로컬 또는 네트워크 동영상을 배경으로 설정하고, 오버레이 효과나 동영상 제어 기능을 추가해 사용자 경험을 한층 더 개선할 수 있습니다. 이번 글의 예제를 참고하여 Flutter 애플리케이션에 배경 동영상을 추가해보세요!