【Flutter】「video_player」で動画を全画面表示させる

概要

全画面で動画を表示させるため、video_playerパッケージを使ってみたメモ

https://pub.dev/packages/video_player

実装

1.「video_player」パッケージをインポート

※2023/07/02時点の最新バージョン

pabspec.yaml

video_player: ^2.7.0

2.表示するmp4ファイルを追加

• ファイルを追加
  asset/video/video.mp4

• yamlに追記

pabspec.yaml

  assets:
    - assets/video/

サンプルとして使用するmp4ファイルのダウンロードはpixabayがおすすめ！
https://pixabay.com/ja/videos/search/

3.コード

video_page.dart

class VideoPage extends StatefulWidget {
  const VideoPage({super.key});

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/video/video.mp4')
      ..addListener(() => setState(() {}))
      ..setLooping(true)
      ..initialize().then((_) => setState(() {}))
      ..play();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: FittedBox(
          fit: BoxFit.cover,
          child: SizedBox(
            width: _controller.value.size.width,
            height: _controller.value.size.height,
            child: VideoPlayer(_controller),
          ),
        ),
      ),
    );
  }
}

結果

実装メモ

表示サイズ

全画面表示かつ、動画が引き延ばされたりしないようアスペクト比を維持させたかったので、
VideoPlayerをラップしてFittedBoxでBoxFit.coverしましたが、以下エラーが出ました。
TextureBox object was given an infinite size during layout.

こちらのissueを参考に実装することで解決。
https://github.com/flutter/flutter/issues/31911#issuecomment-739412800

SizedBox.expand(
  child: FittedBox(
    fit: BoxFit.cover,
    child: SizedBox(
      width: _controller.value.size.width,
      height: _controller.value.size.height,
      child: VideoPlayer(_controller),
    ),
  ),
),

TextureBox学バネば
以下参考にさせていただきました！
https://qiita.com/mao_/items/aa219925270e7dfaee39

状態管理

ビルド直後は動画が表示されず(Size(0, 0)になっている)、
ホットリロードすると動画が表示される(Size(1400, 700)になっている)事象が発生したため、
今回はパッケージのサンプル通りStatefulWidgetで実装しました。

ほんとはRiverpodのProviderで実装したかったですが、
initState()している部分をうまく表現できず。。

void initState() {
  super.initState();
  _controller = VideoPlayerController.asset('assets/video/video.mp4')
  ..addListener(() => setState(() {}))
  ..setLooping(true)
  ..initialize().then((_) => setState(() {}))
  ..play();
}