아무나 빌려가세요

CarouselSlider에 youtube 띄우기 본문

플러터

CarouselSlider에 youtube 띄우기

빌라노바 2022. 1. 26. 20:25

사용 패키지
https://pub.dev/packages/carousel_slider
https://pub.dev/packages/youtube_player_flutter

유튜브 주소를 list에 담는다

List<String> youtubePaths = ['videoId', 'videoId', 'videoId'];

carouselSlider를 적용한다

CarouselSlider.builder(
    itemCount: youtubePaths.length, //슬라이더의 길이를 정함
      options: CarouselOptions(
         viewportFraction: 1.0, // 화면을 꽉 채움
         autoPlay: false,
         onPageChanged: (index, reason) {
         setState(() {
              currentPos = index;
         });
        }),
  itemBuilder: (BuildContext context, int itemIndex,
       int pageViewIndex) =>
    MyView(youtubePaths[itemIndex]),
    
    ),

유튜브를 보여줄 클래스를 만든다

class MyImageView extends StatefulWidget {
  String videoPath;

  MyImageView(this.imgPath, this.videoPath, {Key? key}) : super(key: key);

  @override
  State<MyImageView> createState() => _MyImageViewState();
}

class _MyImageViewState extends State<MyImageView> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: widget.videoPath, //유튜브 주소가 들어간다.
      flags: YoutubePlayerFlags(
        autoPlay: false,
        mute: true, 
        disableDragSeek: true, 
        // 드래그할때 슬라이드가 넘어가기 위해 적용
        loop: false,
        forceHD: false,
      ),
    );
  }

  @override
  void deactivate() {
    // Pauses video while navigating to next page.
    _controller.pause();
    super.deactivate();
    //슬라이드를 할경우 그전에 유튜브는 재생을 중지한다.
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 5),
        child: YoutubePlayer(
          controller: _controller,
          showVideoProgressIndicator: true, //진행바를 보여준다
          progressIndicatorColor: Colors.blue,
        )
        );
  }
}