아무나 빌려가세요
CarouselSlider에 youtube 띄우기 본문
사용 패키지
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,
)
);
}
}
'플러터' 카테고리의 다른 글
flutter 페이지 뒤로 갔을때 새로고침 하는 방법. (0) | 2022.02.22 |
---|---|
openAPI http를 이용해 데이터 가져오기 (0) | 2022.01.26 |
스크롤을 올리거나 내릴 때 투명도를 주는 방법 (0) | 2022.01.26 |
flutter Image Picker를 이용한 사진 선택,서버로 보내기 (0) | 2022.01.24 |
Map (0) | 2022.01.17 |