Flutter Orientation to Landscape or Portrait

やりたいこと

画面向きの自動検知をオンにしても、アプリUIの向きを固定にしたい。

Flutter Orientation

普段Flutterアプリは端末の向きに従って、画面向きの自動検知をオンにしている状態と想定しています。 画面向きは下記の図のように Portrait と Landscape 二つの場合があります。

　　　 Portrait sample

　　　　　　　　　　　　　　　　Landscape Sample

ただ、場合によって、アプリの向きを固定したい時もあると思います。 画面向きの自動検知をオンにしても、画面の向き(Portrait、 Landscape)を変わらないで欲しい時に、SystemChrome.setPreferredOrientations() を使えば、向きが固定されます。

import 'package:flutter/services.dart';

  Future main() {
    setPortraitOrientation();  // Portrait
    //setLandscapeOrientation() // Landscape
    runApp(new MyApp());
  }

  setPortraitOrientation() async {
    await SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown
    ]);
  }

  setLandscapeOrientation() async {
    await SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight
    ]);
  }

上記の例では、SystemChrome.setPreferredOrientations()を使って、二つの関数を作成しました。 Portrait固定にしたい場合、setPortraitOrientation()を呼びます。 逆に、Landscape固定にしたい場合、setLandscapeOrientation()を使えばと思います。

package:flutter/services.dart

Flutter内部の SystemChrome.setPreferredOrientations()関数 で向きの設定が出来ます。 SystemChrome.setPreferredOrientations()関数を使うことには、package:flutter/services.dart が必要ですので、importを忘れないように注意してください。

import 'package:flutter/services.dart';

setPreferredOrientations Method

関数の構成は下記となります。

Future<void> setPreferredOrientations (
 List<DeviceOrientation> orientations
)

戻り値として、Future<void> になりますので、await, asyncを使用します。 引数は、List<DeviceOrientation> なので、設定したい向きの配列に関数の引数にすればOKです。

参考

https://api.flutter.dev/flutter/services/SystemChrome/setPreferredOrientations.html