[프로젝트] 영상플레이어 (3) ImagePicker 사용

들어가기 앞서...

비디오 플레이어 사용법을 알아 볼 것 이다.

---

본문으로...

1.  custom_video_player.dart

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:video_player/video_player.dart';

class CustomVideoPlayer extends StatefulWidget {
  final XFile video;

  const CustomVideoPlayer({Key? key, required this.video}) : super(key: key);

  @override
  State<CustomVideoPlayer> createState() => _CustomVideoPlayerState();
}

class _CustomVideoPlayerState extends State<CustomVideoPlayer> {
  VideoPlayerController? videoPlayerController;

  @override
  void initState() {
    super.initState();
    videoPlayerController = VideoPlayerController.file(file);
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

우리가 변수에 담아놓은 XFile 타입이랑 VideoPlayerController 의 파일 타입은 서로 다르다.

XFile 에서의 파일 타입은 ImagePicker 에서만 사용하는 커스텀 파일 타입이고,

VideoPlayerController 에서의 파일 타입은 플러터에서 기본 제공하는 File 타입이다.

videoPlayerController 의 파일 타입

videoPlayer 사용하는 방법

1. 컨트롤러 생성
2. 초기화
3. 새로운 컨트롤러에 맞게 UI 새로 build 

class _CustomVideoPlayerState extends State<CustomVideoPlayer> {
  VideoPlayerController? videoController;

  @override
  void initState() { // error: 동기식으로 진행을 해야하기 때문에, async 를 붙일 수 없다.
    super.initState();

    // 1. 컨틀롤러 생성
    videoController = VideoPlayerController.file(
      File(widget.video.path),
    );

    // 2. 초기화
    await videoController.initialize(); // 문제1. 여기서 비동기식으로 진행을 해야한다. 그렇다면 다른 방법은?
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

문제 1. videoController. initialze() 함수를 비동기식으로 진행을 해야하는데, initState() 함수는 동기식이다. 그렇다면, 어떻게 진행을 해야할까? 

(initState 는 절대로 async 함수로 만들 수 없다.)

 @override
  void initState() {
    super.initState();

    // initState 함수는 initializeController 가 끝나기를 기다리진 않는다.
    initializeController();
  }

// 밖에 새로운 비동기식 함수를 선언해주고 initState()에서 호출해주면 된다.
  initializeController() async {
    // 컨틀롤러 생성
    videoController = VideoPlayerController.file(
      File(widget.video.path),
    );

    // 초기화
    await videoController!.initialize();

    // 비디오 컨트롤러생성했으니, 새로운 videoController 에 맞게  UI 를 새로 build 해라
    setState(() {

    });
  }
  
  @override
  Widget build() {
  	return VideoPlayer(videoController!); // !를 넣어서 videoController 가 무조건 있게끔.
    // 하지만 error 발생
  }

 

initialize 가 될때 까지 기다려야지 videoController 에 값이 들어가는데, null 일때도 build 함수가 실행이 될수 도 있다. 

그러니 분기처리 추가해주자!

  @override
  Widget build(BuildContext context) {
    if(videoController == null){
    // 로딩 바 
      return CircularProgressIndicator();
    }
    return VideoPlayer(videoController!);
  }

 

결과

 

---

끝으로...

1. 비디오 플레이어 사용법을 알았다.

---