[flutter] carousel_slider를 사용하여 배경 영상 슬라이더 만들기

04 Dec 2023

flutter

이번에는 Flutter 패키지인 carousel_slider를 활용하여 배경 영상 슬라이더를 만들어보겠습니다. carousel_slider는 이미지나 동영상 등을 슬라이드 형태로 보여주는 기능을 제공해주는 편리한 패키지입니다.

1. carousel_slider 패키지 추가하기

먼저, carousel_slider 패키지를 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 carousel_slider를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

위와 같이 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드하세요.

2. 영상 파일 준비하기

슬라이더에 보여줄 영상 파일을 준비합니다. Flutter에서는 assets 폴더에 파일을 저장하고 사용할 수 있습니다. assets 폴더에 원하는 영상 파일(mp4 또는 webm 포맷)을 넣어주세요.

3. 배경 영상 슬라이더 구현하기

이제 실제로 배경 영상 슬라이더를 구현해보겠습니다.

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

class BackgroundVideoSlider extends StatelessWidget {
  final List<String> videoList = [
    'assets/videos/video1.mp4',
    'assets/videos/video2.mp4',
    'assets/videos/video3.mp4',
    // 슬라이더에 넣을 영상 파일 경로들을 리스트로 선언해주겠습니다.
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: videoList.length,
      itemBuilder: (BuildContext context, int index, _) {
        return VideoWidget(videoPath: videoList[index]);
      },
      options: CarouselOptions(
        // 슬라이더의 옵션을 설정해줍니다.
        autoPlay: true,
        enlargeCenterPage: true,
      ),
    );
  }
}

class VideoWidget extends StatelessWidget {
  final String videoPath;

  VideoWidget({this.videoPath});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.black,
      ),
      child: VideoPlayerWidget(videoPath: videoPath),
    );
  }
}

class VideoPlayerWidget extends StatefulWidget {
  final String videoPath;

  VideoPlayerWidget({this.videoPath});

  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.asset(
      widget.videoPath,
    );

    _initializeVideoPlayerFuture = _controller.initialize();

    super.initState();
  }

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

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    );
  }
}

위의 코드를 붙여넣고, videoList에 원하는 영상 파일 경로들을 추가해주세요. 위 코드는 carousel_slider를 사용하여 영상 파일들을 슬라이드 형태로 보여주는 기능을 구현한 예제입니다.

4. 배경 영상 슬라이더 사용하기

이제 배경 영상 슬라이더를 사용하여 화면에 표시해보겠습니다.

import 'package:flutter/material.dart';

import 'background_video_slider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Slider',
      theme: ThemeData.dark(),
      home: Scaffold(
        body: BackgroundVideoSlider(),
      ),
    );
  }
}

위의 코드를 main.dart 파일에 추가하고, Flutter 앱을 실행하면 배경 영상 슬라이더를 확인할 수 있습니다.

결론

이제 carousel_slider 패키지를 사용하여 Flutter 앱에 배경 영상 슬라이더를 만들었습니다. 이 기능을 사용하면 동영상 등을 꾸준히 변경하며 보여줄 수 있어 사용자에게 다양한 경험을 제공할 수 있습니다.