ALIOTHX Developers
ALIOTHXMANAGER
  • 😈DEMO App 설치
  • 크로스플랫폼 개발환경
    • ⚙️Flutter 개발환경
    • 🧑‍💻Flutter 시작하기
    • 📲폰에서 실행
    • 개발가이드
    • 🚀솔루션 설치
    • 🚦코드가이드
      • 명명 규칙및 주석처리
      • 코딩 컨벤션
      • 디렉토리 생성및 관리
      • 페이지 작성
    • 🏭Flutter 아키텍쳐
      • 채널링
      • 웹뷰
        • 웹뷰 설정
        • 웹뷰 연동
      • 보안 (Security)
        • 대칭키 암호알고리즘
        • 비대칭키 암호알고리즘
        • 메시지 다이제스트
        • 탈옥및 루팅 탐지및 차단
        • 앱 위/변조 탐지및 차단
        • 코드 난독화
    • 🖥️관리시스템
    • 🎆협업도구
  • UIUX 컴포넌트
    • UI/UX
      • 테마 적용
      • 화면방향전환
      • 토스트 (Toast)
      • 버튼 (Button)
      • 텍스트 (Text)
      • 탭바 (TabBar)
      • 이미지뷰 (ImageView)
      • 카메라/이미지
      • 페이지 트랜지션
      • 입력필드 (TextField)
      • 체크박스 (CheckBox)
      • 라디오버튼 (RadioButton)
      • 로딩바 (Loading Indicator)
      • 바텀시트 (BottomSheet)
      • 리스트뷰 (ListView)
      • 슬리버 (Sliver)
      • 사운드 (Sound)
      • 애니메이션 (Animation)
      • 위치 및 정렬
      • 커스텀 키보드
      • 카드 (Card)
      • 토글 버튼 (Toggle Button)
      • 다이얼로그 (Dialog)
      • QR코드
      • 페이지뷰 (PageView)
  • Common 컴포넌트
    • 공통모듈
      • 데이터통신과 JSON 파싱
      • 인증 연동
      • 채널링
      • 네비게이션
      • 푸시 메시지
      • SMS 인증
      • 예외처리
  • Security 컴포넌트
    • 보안모듈
      • 메시지 다이제스트
      • 암/복호화
  • Option 컴포넌트
    • 옵션모듈
      • 동영상 플레이어
      • 유튜브 연동
      • 차트
      • SNS 공유
      • 지도
      • 로컬 DB
  • 🎁라이센스및 기술지원
  • 🏢고객사
Powered by GitBook
On this page
  • 화면 방향 제어
  • 옵션 변경
  • 방향 전환 옵션
  • 기본(세로) 방향
  • 가로 방향
  • 세로 방향
  • 가로 오른쪽
  • 가로 왼쪽
  • 세로 위 방향
  • 세로 아래 방향
  1. UIUX 컴포넌트
  2. UI/UX

화면방향전환

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

Previous테마 적용Next토스트 (Toast)

Last updated 1 year ago

화면 방향 제어

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를 사용하면 화면 방향을 쉽게 제어할 수 있으므로, 앱을 다양한 환경에서 더 잘 활용할 수 있습니다. 이를 통해 사용자가 항상 최상의 환경에서 앱을 사용할 수 있도록 보장할 수 있습니다.

Page cover image