[flutter] carousel_slider를 사용하여 슬라이더에 동영상 추가하기

04 Dec 2023

flutter

이번 포스트에서는 Flutter에서 carousel_slider 패키지를 사용하여 동영상 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 추가하기

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받으세요.

동영상 슬라이더 구현하기

이제 메인 화면에서 carousel_slider를 사용하여 동영상 슬라이더를 구현해봅시다.

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

class VideoSlider extends StatefulWidget {
  @override
  _VideoSliderState createState() => _VideoSliderState();
}

class _VideoSliderState extends State<VideoSlider> {
  final List<String> videos = [
    'https://www.example.com/video1.mp4',
    'https://www.example.com/video2.mp4',
    'https://www.example.com/video3.mp4',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: videos.length,
      itemBuilder: (BuildContext context, int index, int realIndex) {
        return Container(
          child: VideoPlayer(videos[index]),
        );
      },
      options: CarouselOptions(
        autoPlay: true,
        enableInfiniteScroll: true,
        enlargeCenterPage: true,
      ),
    );
  }
}

class VideoPlayer extends StatelessWidget {
  final String videoUrl;

  VideoPlayer(this.videoUrl);

  @override
  Widget build(BuildContext context) {
    return VideoPlayerWidget(
      videoUrl,
      // 기타 비디오 플레이어 설정
    );
  }
}

class VideoPlayerWidget extends StatelessWidget {
  final String videoUrl;

  VideoPlayerWidget(this.videoUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      // 동영상 플레이어 UI 구현
      child: Text('Video player for $videoUrl'),
    );
  }
}

위의 코드에서는 VideoSlider 위젯을 만들어서 CarouselSlider.builder를 사용하여 슬라이더를 구성합니다. CarouselOptions를 통해 자동 재생, 무한 스크롤, 가운데 확대 등의 옵션을 설정할 수 있습니다. VideoPlayer와 VideoPlayerWidget은 동영상을 재생하기 위한 위젯입니다. 여기서는 간단히 동영상 URL을 출력하는 예시 코드를 작성했습니다.

실행 결과

위의 코드를 실행하면 동영상 슬라이더가 생성되고 각 슬라이드에는 동영상 URL이 출력됩니다. 이 URL을 실제 동영상 플레이어 위젯과 연동하여 동영상을 재생할 수 있도록 구현해야 합니다.

Flutter Carousel Slider

위의 이미지는 동영상 슬라이더의 예시입니다.

마무리

이번 포스트에서는 Flutter에서 carousel_slider 패키지를 사용하여 동영상 슬라이더를 구현하는 방법에 대해 알아보았습니다. carousel_slider는 간단하면서도 많은 유연성을 제공하는 패키지로, 다양한 슬라이더 UI를 구현할 때 유용하게 사용될 수 있습니다.