Flutter Orientation to Landscape or Portrait

Table of Contents

Table of Contents

やりたいこと

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


Flutter Orientation


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

Portrait     Portrait sample

Landscape                 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