Flutter - 앱 화면 가로 모드 / 세로 모드 고정하기 (자동 회전 방지)

개요

모바일 디바이스의 자동 회전 기능으로 인해 기획해둔 애플리케이션의 UI가 틀어지는 등의 이유로
애플리케이션 내에서 자동 회전을 제한하고 특정 방향으로 고정해야할 상황이 있다.
그럴 때 가로 혹은 세로 모드로 고정할 수 있도록 해주는 코드이다.

화면 모드 고정하기

사용 조건

가로/세로 모드를 고정하려면 패키지가 필요하다.
기본적으로 제공되는 패키지이며, 따로 추가적으로 pub add로 설치할 필요는 없다.
주로 앱 자체를 특정 화면으로 고정하기 위해 사용하므로 보편적으로 main.dart 파일에 코드를 기재한다.
때문에 main.dart 파일에 패키지를 불러와준다.

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

가로 모드 고정하기 (Landscape Mode)

// Set landscape orientation
SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);

세로 모드 고정하기 (Portrait mode)

// Set portrait orientation
SystemChrome.setPreferredOrientations([
   DeviceOrientation.portraitDown,
   DeviceOrientation.portraitUp,
]);

코드 설명

SystemChrome 클래스

운영 체제 그래픽 인터페이스의 특정 측면과 애플리케이션과 상호 작용하는 방식을 제어하는 클래스
주요 메서드는 다음과 같다.
- setPreferredOrientations : 앱의 화면 방향을 설정 (이 포스팅에서 설명하는 메소드)
- setEnabledSystemUIMode : 시스템 UI 모드 설정
- setSystemUIOverlayStyle : 시스템 UI 오버레이 스타일 설정

setPreferredOrientations 정적 메소드

애플리케이션 인터페이스가 표시될 수 있는 방향을 지정하는 메소드 (앱의 화면 방향
메소드를 호출하면 해당 방향만 허용되며 다른 방향으로 회전하지 않는다.
가로 모드(landscape mode)를 기준으로 방향을 지정할 때에는 좌우로 지정한다.
세로 모드(portrait mode)를 기준으로 방향을 지정할 때에는 상하로 지정한다.
목록이 비어있으면 디바이스의 기본 설정을 따른다.

예시

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {

  // 세로 모드 고정
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

참고

개요