Flutter 11주차 - Youtube API를 이용한 동영상 플레이어 앱

Flutter 11주차 - Youtube API를 이용한 동영상 플레이어 앱

 

이번 주차에서는 간단하게 Youtube API를 이용한 동영상 플레이어 앱을 만들어 볼 예정이다.

 

목차

1. 구글 API 키 얻기
2. youtube_player_flutter 패키지 가져오기
3. 코드 작성하기

 

 

구글 API 키 얻기

 

유튜브 API를 사용하기 위해선 구글의 API 키를 발급받아 사용해야 한다.

 

아래 링크로 들어가 본인의 구글 아이디로 로그인하면 다음과 같은 화면이 나온다.

https://console.cloud.google.com/

 

 

일단 처음 구글 콘솔에 접속하면 아무런 프로젝트가 선택되어 있지 않을텐데, 필자는 이미 이전에 구글 API를 사용한 적이 있어 프로젝트가 자동으로 선택되어 있다.

 

좌측에 프로젝트 선택창을 클릭하여 프로젝트를 하나 추가해보자.

 

 

프로젝트 이름은 YoutubeAPI로 지었다.

(테스트용이기 때문에 이름은 어떻게 써도 상관없다.)

 

 

프로젝트가 잘 만들어 졌다면 'Youtube Data API v3'를 검색하여 선택하자.

 

 

Youtube API에 대한 정보가 뜨게 되는데 여기서 '사용'을 클릭하자.

 

 

'사용'을 클릭한 후에 자동으로 API및 서비스 화면으로 리다이렉션 되는데, 왼쪽 메뉴에서 '사용자 인증 정보'를 클릭하자.

 

 

화면 상단에 '사용자 인증 정보 만들기'를 클릭한 후 'API 키'를 눌러 API 키를 생성하자.

 

 

API 키 생성이 완료되면 아래와 같이 API 키가 표시된다.

이제 해당 API키를 가지고 요청을 보내야 하므로 복사해서 잘 저장해놓자.

 

 

 

 

youtube_player_flutter 패키지 가져오기

 

다음으로 유튜브 영상을 재생하기 위해서 youtube_player_flutter 패키지를 설치해보자.

 

pub.dev로 이동하여 'youtube_player_flutter'를 검색하고 들어가자.

 

 

 

아래와 같이 Installing 탭에 들어가서 dependencies에 넣을 패키지 정보를 복사하여 붙여넣자.

 

 

마지막엔 Pub get 을 눌러 패키지 설치를 완료하자.

 

 

 

 

 

 

코드 작성하기

 

이번에는 한 파일에 모든 소스코드를 작성하는 것이 아니라 기능별로 파일과 폴더를 구분하여 작성하였다.

 

 

 

main.dart

  

    
    
    
    
  
import 'package:flutter_202316035/youtube_project/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: HomeScreen(),
    )
  );
}

 

 

coustom_youtube_player.dart

  

    
    
    
    
  
import 'package:flutter/material.dart'; // Flutter의 기본 위젯 및 Material 디자인 라이브러리 임포트
import 'package:flutter_202316035/youtube_project/model/video_model.dart'; // VideoModel 클래스 임포트

// 유튜브 플레이어를 사용하기 위해 패키지 불러오기
import 'package:youtube_player_flutter/youtube_player_flutter.dart'; // 유튜브 플레이어 패키지 임포트

// 유튜브 동영상 플레이어가 될 위젯 클래스
class CustomYoutubePlayer extends StatefulWidget {
  // 상위 위젯에서 입력받을 동영상 정보
  final VideoModel videoModel; // 동영상 모델을 저장할 변수

  const CustomYoutubePlayer({
    required this.videoModel, // 필수 매개변수로 동영상 모델 받기
    super.key // 기본 키 매개변수 사용
  });

  @override
  State<CustomYoutubePlayer> createState() => _CustomYoutubePlayerState(); // 상태 클래스 생성
}

class _CustomYoutubePlayerState extends State<CustomYoutubePlayer> {
  YoutubePlayerController? controller; // 유튜브 플레이어 컨트롤러 변수

  @override
  void initState() {
    super.initState(); // 부모 클래스의 initState 호출

    // 유튜브 플레이어 컨트롤러 초기화
    controller = YoutubePlayerController(
      initialVideoId: widget.videoModel.id, // 처음 실행할 동영상의 ID 설정
      flags: const YoutubePlayerFlags(
        autoPlay: false, // 자동 실행 사용하지 않기
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch, // 자식 위젯을 부모 위젯의 너비에 맞춤
      children: [
        // 유튜브 플레이어 위젯
        YoutubePlayer(
          controller: controller!, // 설정한 컨트롤러를 사용
          showVideoProgressIndicator: true, // 동영상 진행 표시기 표시
        ),
        const SizedBox(height: 16.0), // 위젯 간 간격 설정
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0), // 좌우 패딩 설정
          child: Text(
            widget.videoModel.title, // 동영상 제목 표시
            style: const TextStyle(
              color: Colors.white, // 텍스트 색상 흰색
              fontSize: 16.0, // 텍스트 크기 설정
              fontWeight: FontWeight.w700, // 텍스트 굵기 설정
            ),
          ),
        )
      ],
    );
  }
}

 

 

video_model.dart

  

    
    
    
    
  
// VideoModel 클래스: 동영상 정보를 저장하는 모델
class VideoModel {
  final String id; // 동영상 ID
  final String title; // 동영상 제목

  // 생성자: VideoModel 인스턴스를 생성할 때 사용
  VideoModel({
    required this.id, // ID는 필수 매개변수
    required this.title // 제목은 필수 매개변수
  });
}

 

 

home_screen.dart

  

    
    
    
    
  
import 'package:flutter_202316035/youtube_project/component/custom_youtube_player.dart'; // CustomYoutubePlayer 위젯 임포트
import 'package:flutter_202316035/youtube_project/model/video_model.dart'; // VideoModel 클래스 임포트
import 'package:flutter/material.dart'; // Flutter의 Material 디자인 라이브러리 임포트

// HomeScreen 클래스: 앱의 홈 화면을 구성하는 StatelessWidget
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key}); // 생성자: 키를 받아 초기화

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('202316035 박준혁'),
      ),
      // 기본 구조인 Scaffold 위젯 반환
      backgroundColor: Colors.black, // 배경색을 검정색으로 설정
      body: CustomYoutubePlayer(
        // CustomYoutubePlayer 위젯 사용
        videoModel: VideoModel(
          // VideoModel 인스턴스 생성
          id: '3Ck42C2ZCb8', // 동영상 ID 설정
          title: '다트언어 기본기 1시간만에 끝내기' // 동영상 제목 설정
        )
      ),
    );
  }
}

 

 

앱 실행 결과 아래와 같이 동영상이 잘 플레이 되는 것을 확인할 수 있다.