Flutter/Chewie で「動画だけ回転」したかった話

Flutter アプリで動画再生機能を作る際に、chewie を使って「動画だけを回転させたい（UI コントロールバーなどはそのまま）」と思いましたが。。。

今回は、それができなかった話を簡潔に共有します！

やりたかったこと

イメージ的には、縦持ち端末で映画館のスクリーンを再現するようなレイアウトです。

chewie を使うと、良い感じの再生UI付きのウィジェットが簡単に手に入るので非常に便利です。

Transform.rotate(
  angle: pi / 2, // 90度回転
  child: Chewie(controller: chewieController),
)

このように Chewie 全体を回転させれば、確かに映像もUIも全部回転します。

でもそれでは 再生・一時停止ボタン・再生バーも横向き になってしまいます。

Chewie は video_player の上に独自の UI を合成して作られています。

つまり、映像とUIが一体化した構造 になっているため、UI 部分と映像部分を分離してそれぞれに別の変形（回転など）を加えることができません。

chewie 単体では「動画だけ回転、UIはそのまま」というレイアウトはできませんでした。

今回は chewie の使用をやめ、video_player を使って 独自に再生 UI を構築する方法を取りました。

これにより、当初の目的が達成できました。。。
（ChewieのUIに寄せるのに一苦労しましたが）

参考までに、FFmpeg を使って動画自体を回転させる（事前に変換する）方法も考えましたが、以下の理由から採用しませんでした：

したがって、今回は アプリ内でのリアルタイム回転処理を UI 側で吸収する方針 としました。

Flutter で「動画だけを回転させたい」場合：

以上、ご覧頂きありがとうございました！