Flutter에서 디바이스 해상도에 따른 세로 및 가로 모드로 고정하는 방법

 

안녕하세요! 오늘은 Flutter 앱에서 디바이스 해상도에 따라 세로 또는 가로 모드로 고정하는 방법을 알아보겠습니다.

모바일 앱 개발에서 디바이스 방향은 중요한 요소입니다. 

사용자는 앱을 어떤 방향으로든 사용할 수 있어야 하며, 앱은 해당 방향에 맞게 동작해야 합니다. 

Flutter에서는 SystemChrome 플러그인을 사용하여 앱의 방향을 제어할 수 있습니다.

이 블로그 글에서는 다음과 같은 내용을 다룰 예정입니다.

• 세로 모드 고정
• 가로 모드 고정
• 코드 설명
• 추가 고려 사항

1. 세로 모드 고정

다음 코드는 main() 함수에서 SystemChrome.setPreferredOrientations 함수를 사용하여 디바이스의 방향을 세로 모드로 고정합니다.

void main() async {
  // Firebase 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp, // 세로 방향 위
    DeviceOrientation.portraitDown, // 세로 방향 아래
  ]);

  runApp(const MyApp());
}

 

위 코드를 실행하면 사용자의 디바이스가 세로 모드로 고정됩니다. 

즉, 사용자가 디바이스를 어떤 방향으로 돌려도 앱은 세로 방향으로 표시됩니다.

2. 가로 모드 고정

다음 코드는 main() 함수에서 SystemChrome.setPreferredOrientations 함수를 사용하여 디바이스의 방향을 가로 모드로 고정합니다.

void main() async {
  // Firebase 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft, // 가로 방향 왼쪽
    DeviceOrientation.landscapeRight, // 가로 방향 오른쪽
  ]);

  runApp(const MyApp());
}

 

위 코드를 실행하면 사용자의 디바이스가 가로 모드로 고정됩니다. 

즉, 사용자가 디바이스를 어떤 방향으로 돌려도 앱은 가로 방향으로 표시됩니다.

3. 코드 설명

• WidgetsFlutterBinding.ensureInitialized() 함수는 Flutter 앱이 실행되기 전에 초기화를 완료합니다.
• SystemChrome.setPreferredOrientations 함수는 디바이스의 방향을 설정합니다.
  • DeviceOrientation.portraitUp : 세로 방향 위
  • DeviceOrientation.portraitDown : 세로 방향 아래
  • DeviceOrientation.landscapeLeft : 가로 방향 왼쪽
  • DeviceOrientation.landscapeRight : 가로 방향 오른쪽
• runApp 함수는 Flutter 앱의 루트 위젯을 실행합니다.

4. 추가 고려 사항

• 사용자의 설정을 존중하기 위해 MediaQuery.of(context).orientation 속성을 사용하여 디바이스의 현재 방향을 확인하고 필요에 따라 방향을 변경할 수 있습니다.
• 특정 화면에서만 세로 또는 가로 모드를 고정하고 싶다면 Route 또는 Widget 단위에서 SystemChrome.setPreferredOrientations 함수를 사용할 수 있습니다.
• Flutter 앱에서 다양한 방향을 지원하고 싶다면 SystemChrome.setPreferredOrientations 함수와 함께 MediaQuery.of(context).orientation 속성을 사용하여 상황에 맞는 방향을 설정할 수 있습니다.