31. Flutterで画面を縦or横に固定する方法 (Portrait, Landscape)

今回はFlutterでの画面の向きの制御について学習します。

画面を縦方向(Portrait)にのみ固定する

サンプルコードです。

SystemChrome.setPreferredOrientations(List<DeviceOrientation> orientations)

を使えばいいだけです。
と思ったらFlutter SDKのバージョンによって書き方が違うのか数分ほどハマりました。

最初のコード (* services.dartが必要なのでimportします。)

main.dart

/// 追加する
import 'package:flutter/services.dart';

void main() => {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  runApp(new MyApp());
};

エラーが発生してビルドできませんでした。

setPreferredOrientationsの中身を見に行きます。

static Future<void> setPreferredOrientations(List<DeviceOrientation> orientations) async {
    await SystemChannels.platform.invokeMethod<void>(
      'SystemChrome.setPreferredOrientations',
      _stringify(orientations),
    );
  }

どうやら、setPreferredOrientationsは非同期のようです。Futureが返ってきます。
そのため、非同期として.thenでつなげます。

void main() => {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]).then((_) {
    runApp(new MyApp());
  })
};

今度はビルドが通りましたが、画面が真っ白です。ピクリともしません。
正しいんじゃないの？と何回もビルドを実行しますが駄目でした。

どうやら、

SystemChrome.setPreferredOrientations

はお作法として事前に

WidgetsFlutterBinding.ensureInitialized()

を実行しないといけないらしいです。

main.dart

void main() => {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]).then((_) {
    runApp(new MyApp());
  })
};

これに書き換えますが、今度はWidgetsFlutterBinding.ensureInitialized();でエラーが発生しました。
フザケンナ。一体どうしたら画面固定が実現するのだろうと調査しまくっていたらやっと正解が分かりました。

正解のコード

main.dart

import 'package:flutter/services.dart';

void main() => {
  WidgetsFlutterBinding.ensureInitialized(),
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]).then((_) {
    runApp(new MyApp());
  })
};

より分かりませんが、(,)で繋げる書き方なのだと思います。
ただ自信がありません。

画面を横方向(Landscape)にのみ固定する

縦方向の固定ができたら横方向は簡単です。

main.dart

/// 追加する
import 'package:flutter/services.dart';

void main() => {
  WidgetsFlutterBinding.ensureInitialized(),
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight
  ]).then((_) {
    runApp(new MyApp());
  })
};

これで横方向のみに画面を制御できるようになります。

Flutterで画面の向きを取得する方法

Flutterでも画面の向きを取得できます。
MediaQueryというクラスを使えば、画面の情報を取得できます。

final Orientation orientation = MediaQuery.of(context).orientation;
    final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
    if (isLandscape) {
      print('横向きである');
    }

Orientation型は次のように定義されています。

/// Whether in portrait or landscape.
enum Orientation {
  /// Taller than wide.
  portrait,

  /// Wider than tall.
  landscape
}

以上でFlutterでの画面制御の方法の学習が完了しました。