Flutterで端末の向きを正確に取得できるパッケージ native_device_orientation

Flutterアプリ開発では、

動画プレイヤー
カメラアプリ
ゲーム
ARアプリ
写真編集アプリ

などで端末の向きを取得したいケースがあります。

しかし、Flutter標準の MediaQuery.orientation や OrientationBuilder では、画面レイアウトの向きは取得できても、実際にユーザーが端末をどの方向へ傾けているかまでは判定できません。

そんな時に便利なのが native_device_orientation パッケージです。

今回は、Flutterでネイティブレベルの端末向きを取得できる「native_device_orientation」の使い方や活用シーンを解説します。

native_device_orientationとは？

native_device_orientation は、端末のネイティブな向きを取得するFlutterプラグインです。

Flutter標準のOrientation APIとは異なり、

UIの向き
センサーが検知した実際の端末の向き

の両方を扱うことができます。AndroidとiOSに対応しており、Null SafetyおよびDart 3にも対応しています。

インストール

まずは pubspec.yaml に追加します。

dependencies:
  native_device_orientation: ^2.0.3

続いて、

flutter pub get

を実行します。

なぜFlutter標準機能では不十分なのか？

例えば、

final orientation =
    MediaQuery.of(context).orientation;

で取得できるのは、

Portrait
Landscape

という画面レイアウトの向きです。

しかし、

自動回転をOFFにしている
動画をフルスクリーン表示している
端末は横向きだがUIは縦固定

といったケースでは実際の端末向きとは一致しません。

native_device_orientationでは、センサーから取得した本当の向きを取得できます。

現在の端末向きを取得する

もっとも簡単な利用方法はこちらです。

import 'package:native_device_orientation/native_device_orientation.dart';

final orientation =
    await NativeDeviceOrientationCommunicator()
        .orientation();

取得できる値は以下です。

portraitUp
portraitDown
landscapeLeft
landscapeRight
unknown

端末がどの方向を向いているのかを正確に判定できます。

向きの変化をリアルタイム監視

動画アプリやカメラアプリでは、向きの変化を監視したいケースが多くあります。

その場合はStreamを利用します。

NativeDeviceOrientationCommunicator()
    .onOrientationChanged()
    .listen((orientation) {

  print(orientation);

});

端末を回転するとリアルタイムで通知を受け取れます。

OrientationReaderを使う

Widgetとして利用したい場合は、

NativeDeviceOrientationReader

が便利です。

NativeDeviceOrientationReader(
  builder: (
    context,
    orientation,
  ) {
    return Text(
      orientation.toString(),
    );
  },
)

Builderパターンで簡単に画面へ反映できます。

向きによってUIを変更する

例えば横向きになったら別レイアウトを表示する場合。

NativeDeviceOrientationReader(
  builder: (
    context,
    orientation,
  ) {

    if (orientation ==
        NativeDeviceOrientation.landscapeLeft ||
        orientation ==
        NativeDeviceOrientation.landscapeRight) {

      return LandscapeScreen();

    }

    return PortraitScreen();
  },
)

これにより実際の端末向きに応じてUIを切り替えられます。

カメラアプリでの利用

カメラアプリでは撮影時の端末向きが重要になります。

例えば、

final orientation =
    await NativeDeviceOrientationCommunicator()
        .orientation();

取得した向きを利用して、

撮影画像の回転補正
EXIF情報設定
プレビュー回転

などを行えます。

Flutter標準APIだけでは難しい用途です。

動画プレイヤーとの組み合わせ

動画アプリでも便利です。

例えば、

if (orientation ==
    NativeDeviceOrientation.landscapeLeft ||
    orientation ==
    NativeDeviceOrientation.landscapeRight) {

  enterFullscreen();

}

のようにすると、

端末を横向きにした瞬間に全画面再生へ切り替えることができます。

YouTubeやNetflixのような体験を実装できます。

画面回転ロック中でも取得可能

このパッケージの大きな特徴の一つが、

画面回転ロック中でも実際の端末向きを取得できること

です。

例えば、

UIは縦固定
ユーザーは横向きに持っている

という状態でも、

landscapeLeft

を取得できます。

これはセンサー情報を利用しているためです。

主な活用シーン

カメラアプリ

撮影方向判定
EXIF回転情報設定

動画プレイヤー

自動フルスクリーン切替
横向き再生

ゲーム

端末回転による操作
ジャイロ補助

ARアプリ

デバイス姿勢判定
UI回転制御

写真編集アプリ

画像回転補正
レイアウト切替

メリット

実際の端末向きを取得できる

Flutter標準APIよりも正確です。

リアルタイム監視可能

Streamで向きの変化を検知できます。

実装が簡単

数行で導入できます。

UI向きとセンサー向きを区別できる

複雑なアプリでも柔軟に対応できます。

注意点

Android・iOS専用

現在の対応プラットフォームは、

Android
iOS

のみです。WebやDesktopでは利用できません。

センサー値には若干の遅延がある

物理センサーを利用しているため、端末を動かした瞬間に完全リアルタイムで反映されるわけではありません。

ただし通常のアプリ用途ではほぼ問題にならないレベルです。

画面回転制御は別パッケージ

向きを取得するだけであり、

SystemChrome.setPreferredOrientations()

のような画面回転制御機能は含まれていません。

まとめ

native_device_orientationは、Flutter標準のOrientation APIでは取得できない「実際の端末向き」を取得できる便利なパッケージです。

特に、

カメラアプリ
動画プレイヤー
ARアプリ
ゲーム
写真編集アプリ

などでは非常に有効です。

画面の向きではなく、「ユーザーが端末をどう持っているか」を知りたい場合は、native_device_orientationが有力な選択肢となるでしょう。