[Flutter] 탭제스쳐 동영상 플레이

 

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 선택한 영상을 여기서 변수로 관리해야지
  XFile? video;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: video == null ? renderEmpty() : renderVideo(),
    );
  }

  Widget renderVideo() {
    return Center(
      child: CustomVideoPlayer(
        video: video!,
      ),
    );
  }

  Widget renderEmpty() {
    return Container(
      width: MediaQuery.of(context).size.width,
      decoration: getBoxDecoration(),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _Logo(
            onTap: onLogoTap,
          ),
          SizedBox(
              height:
                  30.0), // 공간을 주고 싶을 때는 패딩도 좋지만 패딩은 한번 감싸야되니까 SizedBox를 써도 된다
          _AppName(),
        ],
      ),
    );
  }

  void onLogoTap() async {
    final video = await ImagePicker().pickVideo(
      source: ImageSource.gallery,
    );

    if (video != null) {
      setState(() {
        this.video = video;
      });
    }
  }

 

 

import 'dart:io';
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({required this.video, Key? key}) : super(key: key);

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

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

  @override
  void initState() { 
  // initState는 await함수를 못받는다 -> 함수는 async만들 수 있으니 해결책 함수로 만들고(initializeController) 함수에는
    super.initState();
//VideoPlayerController는 File타입(플러터제공)이고 imagepicker는 Xfile타입임.
      initializeController(); 
      // InitState는 initializeController를 실행만 할 뿐 끝날 때까지 기다리지 않는다.
  }
  initializeController()  async {
    videoController = VideoPlayerController.file( 
    // file로 된 sample1,2,3 을 넣을 거니까)
      
      File(widget.video.path), 
      //Xfile to File
      //File은 File.io에서 제공하는 것만 써야함(html용 안됨!!!!!!!!!!!!)
    );
    await videoController!.initialize(); //videoController 넣었으니 언래핑

    setState(() {
      // ui를 새로 빌드해라!
    });
  }

  @override
  Widget build(BuildContext context) {
    //videoController가 null일 때 처리를 해줘야한다. initState는 무조건 실행이 되니까..
    if(videoController == null) {
      return CircularProgressIndicator();
    }
    return VideoPlayer(videoController!);
  }
}