[021] 플러터 (Flutter) 배우기 - Youtube Video (유튜브 동영상 삽입)

2022. 11. 11. 22:13모바일어플개발/Flutter

반응형

안녕하세요~ totally 개발자입니다.

 

Youtube Video

 

오늘은 플러터에 유튜브 동영상을 삽입하는 방법에 대하여 알아보겠습니다. 이 유튜브 동영상 삽입을 위해서는 플러그인을 사용해야 하는데 진행 과정은 아래와 같습니다.

 

1. 플러그인 설정

2. Info.plist 수정

3. 동영상 및 비디오 컨트롤러 추가

 

먼저 플러그인 설정부터 확인해보도록 하겠습니다.

 

1. 플러그인 설정

 

youtube_player_flutter 플러그인 추가

우선 프로젝트 경로에 있는 pubspec.yaml 파일을 찾고 dependencies: 아래 줄에 youtube_player_flutter: 을 추가해줍니다.

 

 

2.  Info.plist 수정

 

ios -> Runner -> Info.plist에 5,6번째 줄처럼

<key>io.flutter.embedded_views_preview</key>

<true/>

넣어줍니다

 

 

3. 코드 삽입

 

유튜브 영상을 준비합니다. 저는 Flutter 공식채널에 welcome to flutter 영상을 예시로 사용하겠습니다. 

 

먼저 youtubeId 변수를 watch?v= 뒤에 있는 아이디 값을 초기화해줍니다. 그 다음 YoutubePlayerController를 생성하는데 만약 에러가 난다면 2번째 줄처럼 import 해주시면 됩니다. 

 

YoutubePlayer 위젯 추가 모습

마지막으로 YoutubePlayer 위젯을 body에 추가해주시면 됩니다.

 

 

영상 모습

구동 모습입니다. 간단한 방법으로 플러터에서 유튜브 영상을 삽입할 수 있으며 시뮬레이터에서도 확인이 가능하며 재생, 정지 등의 기능을 당연히 사용할 수 있습니다.

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/6tDcZNa_Q2M

 

반응형