반응형
개요
모바일 디바이스의 자동 회전 기능으로 인해 기획해둔 애플리케이션의 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(),
),
);
}
참고
반응형