# 화면방향전환

## **화면 방향 제어**

***`SystemChrome.setPreferredOrientations`*** 함수를 사용하여 화면 방향 전환을 제어합니다. 앱의 요구 사항에 맞게 원하는 옵션을 선택하여 설정할 수 있습니다.

<figure><img src="/files/gfLsQZiAGzUc38kFvDoR" alt=""><figcaption></figcaption></figure>

## 옵션 변경

앱이 특정 상황에서 다른 화면 방향을 요구하거나 변경해야 할 때, ***`SystemChrome.setPreferredOrientations`*** 함수를 다시 호출하여 옵션을 변경할 수 있습니다.&#x20;

방향 전환에는 아래와 같이 4가지의 옵션이 있으며, 이를 통해 앱이 원하는 화면 방향에서 실행될 수 있습니다.

* **landscapeLeft** : 가로 왼쪽&#x20;
* **landscapeRight** : 가로 오른쪽&#x20;
* **portraitDown** : 세로 아래 방향
* **portraitUp** : 세로 위 방향&#x20;

## 방향 전환 옵션

화면 방향 제어 함수를 호출하여 원하는 옵션을 적용하면, 아래와 같이 다양한 화면 방향 전환을 구현할 수 있습니다.&#x20;

### **기본(세로) 방향**

이 옵션은 기기를 세로 모드로 고정하며, 가로 모드로의 전환을 허용하지 않습니다.

```dart
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight
]);
```

### **가로 방향**

이 옵션은 기기를 가로 모드로 고정하며, 세로 모드로의 전환을 허용하지 않습니다.

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

### **세로 방향**&#x20;

이 옵션은 기기를 세로 모드로 고정하며, 가로 모드로의 전환을 허용하지 않습니다.

```dart
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
]);
```

### **가로 오른쪽**

이 옵션은 기기를 가로 모드로 고정하며, 가로 왼쪽 모드로의 전환을 허용하지 않습니다.

```dart
SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeRight,
]);
```

### **가로 왼쪽**

이 옵션은 기기를 가로 모드로 고정하며, 가로 오른쪽 모드로의 전환을 허용하지 않습니다.

```dart
SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
]);
```

### **세로 위 방향**

이 옵션은 기기를 세로 모드로 고정하며, 세로 아래 모드로의 전환을 허용하지 않습니다.

```dart
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
]);
```

### **세로 아래 방향**

이 옵션은 기기를 세로 모드로 고정하며, 세로 위 모드로의 전환을 허용하지 않습니다.

```dart
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitDown,
]);
```

화면 방향 전환은 사용자 경험을 향상시키고, 앱의 외관 및 동작을 최적화하는 데 매우 중요한 기능입니다. Flutter를 사용하면 화면 방향을 쉽게 제어할 수 있으므로, 앱을 다양한 환경에서 더 잘 활용할 수 있습니다. 이를 통해 사용자가 항상 최상의 환경에서 앱을 사용할 수 있도록 보장할 수 있습니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/orientation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.