Flutter筆記 - 螢幕顯示方向 Screen View Orientation

今天來寫點FLutter的筆記吧

如果我們想要在APP中限制使用者的畫面顯示方向，不支持使用者橫放造成畫面佈局異常，或是想要在全螢幕顯示強制變橫向顯示，該怎麼做呢?

其實很簡單

先import 'package:flutter/services.dart';

再來只需要在需要的Widget中呼叫SystemChrome.setPreferredOrientations來限制許可的方向。

四個方向的參數分別為

• 右傾 DeviceOrientation.landscapeRight
• 左傾 DeviceOrientation.landscapeLeft
• 直立 DeviceOrientation.portraitUp
• 倒立 DeviceOrientation.portraitDown

下面範例為某個Widget產生後開始限制只能橫向顯示，離開後恢復全方向顯示。

import 'package:flutter/services.dart';

@override
void initState() {
	super.initState();

	SystemChrome.setPreferredOrientations([
	  DeviceOrientation.landscapeRight,
	  DeviceOrientation.landscapeLeft,
	]);
}

@override
void dispose() {
	SystemChrome.setPreferredOrientations([
		DeviceOrientation.landscapeRight,
		DeviceOrientation.landscapeLeft,
		DeviceOrientation.portraitUp,
		DeviceOrientation.portraitDown,
	]);
	super.dispose();
}

如果需要一進入APP就全局限制，可以加在Main()中，如下列範例允許上下直立顯示，不允許左右橫向顯示。

import 'package:flutter/services.dart';

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

上面全局限制範例中很重要很重要很重要的一點是要在呼叫設定前加上WidgetsFlutterBinding.ensureInitialized()

確保Flutter已經先初始化完成，否則一啟動就會crash囉！

以上就是APP中螢幕顯示方向限制的方法，聰明的你學會了嗎?