[flutter] 플러터(expandable)를 이용한 비디오 스트리밍 서비스 개발 방법

04 Dec 2023

flutter

이번 포스트에서는 Flutter를 사용하여 비디오 스트리밍 서비스를 개발하는 방법에 대해 알아보겠습니다. 특히, expandable 위젯을 활용하여 사용자가 비디오 스트리밍 화면을 확장/축소할 수 있도록 만들어보겠습니다.

프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 의존성을 추가해야 합니다. pubspec.yaml 파일에 video_player 패키지를 추가하여 비디오 재생 기능을 사용할 수 있도록 합니다.

dependencies:
  flutter:
    sdk: flutter
  video_player: ^2.2.0

저장한 뒤, flutter packages get 명령어를 실행하여 의존성을 다운로드합니다.

비디오 재생 화면 구성

비디오를 재생할 화면을 구성하기 위해 VideoPlayerController와 VideoPlayer 위젯을 사용하겠습니다. 또한, 화면을 확장/축소할 수 있는 expandable 위젯을 추가하여 사용자가 원하는 크기로 비디오 화면을 조정할 수 있도록 만들겠습니다.

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

class VideoScreen extends StatefulWidget {
  @override
  _VideoScreenState createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
  VideoPlayerController _controller;
  bool _expanded = false;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network("비디오 URL");
    _controller.initialize().then((_) {
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("비디오 스트리밍 서비스"),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? ExpandableNotifier(
                child: Column(
                  children: [
                    AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    ),
                    Expandable(
                      collapsed: TextButton.icon(
                        onPressed: () {
                          setState(() {
                            _expanded = true;
                          });
                        },
                        icon: Icon(Icons.fullscreen),
                        label: Text("전체 화면으로 보기"),
                      ),
                      expanded: Column(
                        children: [
                          AspectRatio(
                            aspectRatio: _controller.value.aspectRatio,
                            child: VideoPlayer(_controller),
                          ),
                          TextButton.icon(
                            onPressed: () {
                              setState(() {
                                _expanded = false;
                              });
                            },
                            icon: Icon(Icons.fullscreen_exit),
                            label: Text("축소하기"),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

위 코드에서 “비디오 URL” 부분에는 스트리밍할 비디오의 URL을 적어주어야 합니다. 또한, _expanded 변수를 사용하여 현재 화면이 확장된 상태인지 추소된 상태인지를 저장합니다.

비디오 스트리밍 서비스 실행

이제 비디오 스트리밍 서비스를 실행해보겠습니다. main.dart 파일에 아래와 같이 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:your_app/video_screen.dart';

void main() {
  runApp(VideoApp());
}

class VideoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '비디오 스트리밍 서비스',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VideoScreen(),
    );
  }
}

이제 앱을 실행하면 비디오 스트리밍 화면이 나타나며, 사용자는 원하는 크기로 비디오 화면을 확장하거나 축소할 수 있습니다.

결론

이번 포스트에서는 Flutter를 이용하여 비디오 스트리밍 서비스를 개발하는 방법에 대해 알아보았습니다. expandable 위젯을 활용하여 사용자 경험을 향상시킬 수 있으며, 비디오 기능을 사용하기 위해 video_player 패키지를 추가하였습니다. 이를 기반으로 다양한 비디오 스트리밍 서비스를 개발해보세요!

참고 자료

Flutter 공식 홈페이지: https://flutter.dev/
video_player 패키지: https://pub.dev/packages/video_player