인프런 커뮤니티 질문&답변

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, super.key});

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

class _CustomVideoPlayerState extends State<CustomVideoPlayer> {
  // 비디오 플레이어 같은 경우 컨트롤러를 사용해서 위젯을 구성해 줘야한다.
  VideoPlayerController? videoController;

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

  initializeController() async {
    videoController = VideoPlayerController.file(
      File(widget.video.path),
      // 이미지 피커에서 가져온 XFile 이랑 형식이 같지않아 dart:io 에 File에다가 변경해줘서 넣어준다.
    );

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

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (videoController == null) {
      return CircularProgressIndicator();
    }

    return AspectRatio(
      // 비율 맞추는 위젯, 옵션
      aspectRatio: videoController!.value.aspectRatio,
      child: Stack(children: [
        VideoPlayer(
          videoController!,
        ),
        _Controler(),
      ]),
    );
  }
}

class _Controler extends StatelessWidget {
  const _Controler({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black.withOpacity(0.5),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          renderIconButton(
            onPressed: () {},
            iconData: Icons.rotate_left,
          ),
          renderIconButton(
            onPressed: () {},
            iconData: Icons.play_arrow,
          ),
          renderIconButton(
            onPressed: () {},
            iconData: Icons.rotate_right,
          ),
        ],
      ),
    );
  }

  Widget renderIconButton({
    required VoidCallback onPressed,
    required IconData iconData,
  }) {
    return IconButton(
      onPressed: onPressed,
      iconSize: 30.0,
      color: Colors.white,
      icon: Icon(iconData),
    );
  }
}

해당 코드 로직입니다.!