[Flutter] - Youtube Player 추가

Flutter 앱에서 Youtube플레이어를 실행할 수 있는 방법을 포스팅하겠다.

 

패키지 설치 확인

 

의존성을 추가하기 위해선 pubspec.yaml 파일을 수정해줘야한다.

먼저 유투브를 Flutter에서 사용할 수 있도록 의존성을 추가해준다.

 

info.plist파일 수정

 

iOS의 경우 info.plist를 추가해줘야 한다.

기존에도 인터넷을 사용하거나, 네이티브 기능을 필요로할때 info.plist 파일을 수정하는 일이 있었기 때문에 어느정도 이해를 할 수 있었다.

 

경로 : ios/Runner/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>io.flutter.embedded_views_preview</key>	<-
	<true/>					 	<-					
    .
    .
    .
    .
    .

 

 

패키지 다운로드

 

터미널에서 Flutter 프로젝트에서 패키지를 다운로드해야한다.

flutter pub get

 

성공한듯하다.

 

 

사용

 

준비가 완료됐으면, 플레이어를 사용하려는 파일에 패키지를 import해준다.

import 'package:youtube_player_flutter/youtube_player_flutter.dart';


class SecondView extends StatelessWidget {
  //해당 주소의 endpoint 기입
  //혹은 static String link = YoutubePlayer.convertUrlToId('영상링크')
  static String link = '영상링크 endPoint';	
  
  //파라미터로 영상링크 및 자동재생 옵션 선택
  final YoutubePlayerController con = YoutubePlayerController(
    initialVideoId:link,
    flags:const YoutubePlayerFlags(autoPlay:false));

  SecondView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("안뇽"),
        leading: IconButton(
            onPressed: ()=> Navigator.pop(context),
            icon: Icon(Icons.chevron_left)
        ),
      ),
      //컨트롤러 파라미터 추가
      body: YoutubePlayer(
          controller: con
      )
    );
  }
}

 

이렇게 추가하면 다음과 같이 표시가 된다.