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

はじめに

全画面で動画を表示させるため、video_playerパッケージを使ってみました。
Flutter公式から提供されているパッケージということもあり信頼度高めですね。

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();
}

最後に

参考になれば幸いです。