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
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での画面制御の方法の学習が完了しました。