[flutter]特定の画面のみアプリの向きを変更する方法をまとめた

はじめに

こんにちは。
今回の記事では、特定の画面のみ画面の向きを変更する方法について共有します。

作成するアプリの要件によっては、基本は縦画面だが、この画面だけは横画面で実装してくれみたいなことを要求されることがあるかと思います。（要求された）

一部詰まった所等あるので、共有できたらと思います。

要件

ざっくりですがこんな感じで実装していきます。

今回は、基本的にほとんどの画面は縦向きに固定しますが、一部の画面のみ横向きに実装することとします。
※逆の場合は、この記事の逆に実装すればOKです。

画面を縦に固定する

まずは、画面を縦に固定する方法を解説します。

以下のように、SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
でrunAppをネストしていきます。

main.dart

void main() {

  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    // 縦向き
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]).then((_) {
    runApp(const MyApp());
  });
}

これで全ての画面を縦方向に固定することができます。

ちなみにですが、DeviceOrientationには
landscapeLeft、
landscapeRight、
portraitDown、
portraitUp
が定義されています。

今回はportraitUpを使用しましたが、例えば、portraitDownを追加することで、スマホを真逆にした際に、アプリが後ろ向きに表示されるようになります。

余談ですが、横向きにしたいのであれば、以下のように記載してください。

main.dart

  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight]);
  ///画面を縦に固定
    runApp(
        const ProviderScope(
            child: MyApp()));

これで横向きの画面が完成します。

*ちなみにですが、SystemChrome〜を記載するにはflutter/services.dartをインポートする必要があります。
（editorがサジェストしてくれるので、特に問題ないと思いますが一応）

横向きにしたい画面を実装する

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
      ///横向きに固定する

    ]);

  }

  @override
  void dispose() {
    // ウィジェットが破棄されたときに元の向きに戻す（縦向き）
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

    super.dispose();
  }

initState内で SystemChrome.setPreferredOrientationsで画面の向きを固定します。
またこのままだと、元の画面に戻るタイミングでmain.dartで記載したSystemChromeと重複して画面の向きが元に戻らないバグが起きてしまいます。

そこでdispose()内で、そのwidgetが破棄されるタイミングで、元来のアプリの向きを戻すことで、うまく動作するようになります。

※今回はstatefulWidgetで実装していますが、ご自分が採用している状態管理の方法で置き換えて使用することをお勧めします。

全コード

今回の全コードはgithubに上げていますので、気になる方は以下からアクセスしてください。

　最後に

最後まで読んでいただきありがとうございました。
もし間違いなど気になる点がありましたらコメントいただけると幸いです。