[Flutter] Portrait, Landscape mode 막기

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

화면 구성을 마쳤는데, device에서 화면을 돌릴 때마다 MediaQuery를 기반으로 설계한 UI가 바뀌면서, 화면이 깨지는 현상이 있습니다.

물론 아래와 같이 portrait(세로모드)인지 landscape(가로모드)인지를 감지해서 따로 구현해줄 수도 있지만, 아예 orientation을 하나로 픽스하려고 합니다.

 

if (MediaQuery.of(context).orientation == Orientation.portrait){
	// is portrait
}else{
	// is landscape
}

---

2. Why? (원인)

• system에서 아예 막아놓아야 합니다.

---

3. How? (해결책)

• main.dart의 main() 함수에 아래와 같이 setPreferredOrientations() 셋팅을 해줍니다.
  • systemChrome은 OS의 graphical interface를 컨트롤하기 위한 클래스입니다. 아래와 같이 Orientation을 셋팅하거나, Rotation을 통해 full screen이 가능하도록 하는 setEnabledSystemUIMode() 등을 활용할 수 있습니다.
  • 저의 경우는 가장 기본적인 portraitUp만 살려두었습니다.

import 'package:flutter/services.dart';

void main() async {
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight
  ]);
  runApp(new MyApp());
}

• iOS를 위한 추가 셋팅 
  • ios/Runner/Info.plist 내의 아래의 UISupportedUnterfaceOrientations key내부에 아래의 항목만 놔두고 지워주면 됩니다.
  • 혹은 아래 그림처럼 open ios/Runner.xcworkspace 명령어를 통해 연 후 Device Orientation에 항목을 해제해줍니다.
  • 이후에 ios에서 pod install을 다시 진행해줍니다.

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

• Android를 위한 추가 셋팅
  • android/app/src/main/AndroidManifest.xml 내부의 android:screenOrientation="portrait"을 추가해줍니다.

 

 

++ 추가 팁: 다른 위젯의 경우 내부적으로 Orientation 변화에 대해 막는 기능이 따로 필요할 수도 있습니다

ex) await cameraController?.lockCaptureOrientation();

---

https://stackoverflow.com/questions/49418332/flutter-how-to-prevent-device-orientation-changes-and-force-portrait

https://api.flutter.dev/flutter/services/SystemChrome-class.html