by
Oct 11. 2021
플러터 YouTube 패키지 사용하기
with YouTube Data API (2/3)
플러터 YouTube 패키지 사용하기
SDK Version : Flutter 2.2.3, Dart 2.13.4
OS : Windows 11
IDE : Android Studio
Target : Android
플러터 Retrofit 사용하기에서 다룬 예제에 약간의 추가적인 작업을 통해서 유튜브 영상을 재생해보자. youtube_player_flutter 패키지를 사용하면 아주 쉽게 재생이 가능하다. 사실 유튜브만을 위한 작업을 할 것이라면 처음부터 이 패키지를 사용하는 게 간편하다. YouTube Data API로 데이터 가져와서 그걸 또 UI로 보여주는 작업들마저 해당 패키지에서 간단하게 제공하기 때문이다. 즉, retrofit을 사용할 필요가 없다.
여기서는 retrofit으로 이미 정보를 가져온 이전 작업물에 youtube_player_flutter를 추가하여 재생 용도로만 해당 패키지를 사용한다. 시작!
1. minSdkVersion 17로 설정
youtube_player_flutter 패키지 사용을 위해서는 minSdkVersion 17 이상으로 설정해야 한다. 설정 관련 부분은 flutter가 아닌 android의 build.gradle에서 할 수 있다.
2. 패키지 추가
pubspec.yaml에 youtube_player_flutter 패키지를 추가한다. pub get도 잊지 말자!
3. 플레이어 위젯 생성
다음과 같이 추가한 패키지를 import 한 후 YouTubePlayer 위젯을 사용하기 위한 StatefulWidget를 생성한다.
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
YouTubePlayerController에서 여러 가지 설정을 할 수 있다. initialVideoId는 재생하고자 하는 영상의 id로 필수 매개변수이다. flags의 매개변수명은 직관적이라 어떤 역할인지 알아보기 쉽다. 여기서는 리스트 항목을 눌렀을 때 화면 전환 후 곧바로 영상을 재생하기 위해서 autoPlay를 true로 설정했다. 별도로 플레이 버튼 등을 누르지 않아도 영상이 바로 재생되게 하는 옵션이다. 그리고 enableCaption을 통해서 자막을 켰다.
실제 영상을 재생하는 화면은 YouTubePalyer인데 생성한 YouTubePlayerController를 넘겨주면 설정한 옵션을 적용할 수 있다. 또한 플레이어 UI 구성에 대한 변경도 가능하다. 예를 들어 bottomActions 부분은 화면의 하단 부분에 관련된 UI 구성이다. 여기서 RemainDuration()를 추가하면 남은 시간을 표시해준다.
4. Navigator 추가
플레이어까지 추가했으면 리스트를 선택했을 때 Navigator로 플레이어로 화면 전환하도록 한다. 이를 위해 Page1()의 onTap 부분에 다음 코드를 추가한다.
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Player('dyRsYk0LyA8',
response.snippet.title),
),
);
},
또한 MaterialPageRoute를 사용하기 위해서 WidgetDemoState에 있던 MaterialApp을 main()으로 옮겼다.
void main() => runApp(
new MaterialApp(title: 'Retrofit Demo', home: new WidgetDemo()),
);
실행 하면 다음과 같다. 리스트에서 항목을 선택하면 플레이어로 넘어가고 영상이 자동 재생된다. 자막 설정을 했기 때문에 자막이 보인다. 영상을 터치하면 bottomActions에서 지정한 현재 재생 위치, 진행 상황, 남은 시간이 보인다.
