[flutter] RaisedButton을 사용해 동영상 재생

07 Dec 2023

flutter

이번에는 Flutter에서 RaisedButton을 사용하여 동영상을 재생해보겠습니다. Flutter는 Dart 언어를 사용하여 크로스 플랫폼 앱 개발을 지원하는 프레임워크입니다.

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

동영상을 재생하기 위해 video_player 패키지를 추가해야 합니다. 이 패키지를 사용하여 동영상을 로드하고 플레이할 수 있습니다.

pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  video_player: ^0.10.11

패키지를 추가한 후, 터미널에서 다음 커맨드를 실행하여 패키지를 설치합니다:

flutter pub get

2. 비디오 플레이어 사용하기

각각의 단계를 따라 비디오 플레이어를 사용하여 동영상을 재생해봅시다.

먼저, main.dart 파일에 다음 코드를 추가합니다:

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

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

class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Video Player'),
        ),
        body: VideoPlayerScreen(),
      ),
    );
  }
}

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.asset('assets/video.mp4');
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          );
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

위의 코드는 Flutter 앱 템플릿에서 시작하여 VideoPlayerScreen 위젯을 생성해주고, 비디오 플레이어를 초기화하고 재생할 준비를 합니다. 비디오 파일은 ‘assets/video.mp4’ 경로로 사용되었습니다.

3. RaisedButton 추가하기

이제 RaisedButton을 추가하여 동영상을 제어하는 버튼을 만들어봅시다. 코드를 다음과 같이 수정합니다:

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.asset('assets/video.mp4');
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: FutureBuilder(
            future: _initializeVideoPlayerFuture,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                );
              } else {
                return Center(child: CircularProgressIndicator());
              }
            },
          ),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Text(
            _controller.value.isPlaying ? 'Pause' : 'Play',
          ),
        ),
      ],
    );
  }
}

위의 코드는 RaisedButton을 추가하여 동영상을 재생/일시정지할 수 있는 버튼을 만들었습니다. 버튼이 클릭되면 _controller의 상태에 따라 재생 또는 일시정지 동작이 수행됩니다.

4. 앱 실행하기

이제 위에서 작성한 코드를 실행하여 동영상 재생 기능이 포함된 앱을 확인할 수 있습니다. 터미널에서 flutter run 명령어를 실행하여 앱을 실행합니다.

이렇게 Flutter에서 RaisedButton을 사용하여 동영상을 재생하는 방법을 알아보았습니다. VideoPlayer 패키지와 RaisedButton을 활용하여 Flutter 앱 안에서 동영상을 재생하는 기능을 구현할 수 있습니다.