Flutter/Chewie で「動画だけ回転」したかった話
Flutter アプリで動画再生機能を作る際に、chewie を使って「動画だけを回転させたい（UI コントロールバーなどはそのまま）」と思いましたが。。。
今回は、それができなかった話を簡潔に共有します！
やりたかったこと
- 端末の画面を縦に保ったまま、
- 動画プレイヤーの映像部分だけを横向き（90度回転）
- 再生・一時停止ボタンなどの 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 を使う案について
参考までに、FFmpeg を使って動画自体を回転させる（事前に変換する）方法も考えましたが、以下の理由から採用しませんでした：
- Flutter の公式
ffmpeg_kit_flutterはメンテナンス・サポートが停止 - 実行時変換には デバイス性能に依存する処理負荷 があり、パフォーマンスの懸念
- アプリバイナリが大きくなりがちで、サイズ最適化にも影響
したがって、今回は アプリ内でのリアルタイム回転処理を UI 側で吸収する方針 としました。
まとめ
Flutter で「動画だけを回転させたい」場合：
-
chewieは便利だが、UI 分離ができないため今回のような用途には不向き -
video_playerを使って再生 UI を独自実装すれば、柔軟なレイアウト制御が可能 - 補足:
FFmpegに関して、ffmpeg_kit_flutter_newの方であればメンテナンスも継続されていました。
以上、ご覧頂きありがとうございました！