flutter에서 화면 회전 하지 못하게 막는 방법

앱을 만들 때 가로 모드 UI를 별도로 구현하지 않는 이상 휴대폰을 가로로 회전 시 앱이 같이 돌지 않게 해야 합니다.

 

안드로이드에서는 간단했지만 flutter에서는 조금 복잡한데

 

flutter에서 세로 모드만 사용하는 방법을 알려드리겠습니다.

 

---

flutter 코드 작성하기

먼저 제일 처음 실행되는 파일(예: main.dart)에 들어갑니다.

 

제일 위에 다음과 같은 패키지를 선언합니다.

 

import 'package:flutter/services.dart';

 

그리고 main() 함수로 가서 다음과 같이 정의합니다.

 

void main() async {
  // 이 부분을 추가합니다.
  WidgetsFlutterBinding.ensureInitialized();
  // 이 부분을 추가한 뒤 then 안에 runApp() 부분을 넣어줍니다.
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((value) => runApp(MaterialApp(theme: ThemeData(), home: const TestProject())));
}

 

각각의 코드를 설명하자면 다음과 같습니다.

 

WidgetsFlutterBinding.ensureInitialized();

 

Flutter 엔진이 UI를 그리기 전에 필요한 바인딩을 초기화합니다.

 

혹시 main 함수에 aync 등을 사용하여 await 함수 등을 호출하고 있다면

 

그전에 WidgetsFlutterBinding.ensureInitialized(); 를 호출해서 먼저 초기화해야 합니다.

---

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]) .then((value) => runApp(MaterialApp(theme: ThemeData(), home: const TestProject())));

 

앱이 동작하는 방향을 지정하게 합니다.

 

여기서는 세로 방향으로만 앱을 사용할 수 있도록 지정했습니다. (DeviceOrientation.portraitUp)

 

그 이후(then) 앱을 실행한다.

 

* 참고로 저는 MaterialApp, ThemeData 같은 것들이 들어있지만 넣지 않아도 전혀 문제 없습니다.

 

위와 같은 방법을 사용하면 flutter를 사용해서 앱을 세로 모드에서만 사용하도록 할 수 있습니다!

---

 

플러터 - UI 업데이트를 최적화 하는 방법, UI Tree란?