Page cover image

화면방향전환

Flutter를 사용하여 모바일 앱을 개발할 때 화면 방향 전환은 매우 중요한 고려 사항 중 하나입니다. 사용자가 기기를 가로 또는 세로로 회전할 때, 앱의 화면도 함께 회전하거나 고정시켜야 합니다. SystemChrome를 사용하여 화면 방향을 제어하며, 다양한 화면 방향 옵션을 활용할 수 있습니다.

화면 방향 제어

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

옵션 변경

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

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

  • landscapeLeft : 가로 왼쪽

  • landscapeRight : 가로 오른쪽

  • portraitDown : 세로 아래 방향

  • portraitUp : 세로 위 방향

방향 전환 옵션

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

기본(세로) 방향

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

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

가로 방향

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

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

세로 방향

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

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

가로 오른쪽

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

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

가로 왼쪽

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

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

세로 위 방향

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

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

세로 아래 방향

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

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

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

Last updated