[flutter] 플러터 스크롤바를 사용한 동영상 플레이어 구현하기

11 Dec 2023

flutter

플러터를 사용하여 스크롤바가 있는 동영상 플레이어를 구현하는 방법을 알아봅시다.

필요한 패키지 설치하기

먼저, video_player 패키지와 scrollable_positioned_list 패키지를 설치해야 합니다.

flutter pub add video_player
flutter pub add scrollable_positioned_list

동영상 플레이어 UI 만들기

다음으로, 동영상 플레이어 UI를 만들어야 합니다. 아래 코드는 간단한 동영상 플레이어 UI의 예시입니다.

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

class VideoPlayerWithScrollbar extends StatefulWidget {
  @override
  _VideoPlayerWithScrollbarState createState() => _VideoPlayerWithScrollbarState();
}

class _VideoPlayerWithScrollbarState extends State<VideoPlayerWithScrollbar> {
  late VideoPlayerController _controller;
  final ItemScrollController _scrollController = ItemScrollController();

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network('https://www.example.com/sample.mp4')
      ..initialize().then((_) {
        setState(() {
          // 비디오가 준비되었을 때 실행할 작업
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('동영상 플레이어')),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: _controller.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  )
                : CircularProgressIndicator(),
            ),
          ),
          ScrollablePositionedList.builder(
            itemCount: _controller.value.duration.inSeconds,
            itemBuilder: (context, index) => Container(
              height: 20,
              child: Text('$index 초'),
            ),
            itemScrollController: _scrollController,
          ),
        ],
      ),
    );
  }

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

위 코드에서 VideoPlayerWithScrollbar 위젯은 video_player 패키지를 사용하여 동영상을 재생하고, scrollable_positioned_list 패키지를 사용하여 스크롤바를 만듭니다.

동영상 플레이어 사용하기

이제 VideoPlayerWithScrollbar 위젯을 사용하여 동영상 플레이어를 만들어보세요.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: VideoPlayerWithScrollbar(),
    ),
  ));
}

이제 동영상 플레이어에 스크롤바가 추가된 모습을 확인할 수 있습니다.

이상으로, 플러터를 사용하여 스크롤바가 있는 동영상 플레이어를 구현하는 방법에 대해 알아보았습니다.

참고 자료: