Flutter의 화면 회전(Screen Rotation) 지원 방법

Flutter의 화면 회전(Screen Rotation) 지원 방법

Flutter 앱을 개발할 때, 화면 회전(Screen Rotation)을 고려하는 것은 중요합니다. 스마트폰과 태블릿 사용자는 세로(Portrait) 또는 가로(Landscape) 모드로 앱을 사용할 수 있기 때문에, 화면 회전에 따라 UI가 자연스럽게 변경되어야 합니다.

이 글에서는 Flutter에서 화면 회전을 제어하고, 가로 및 세로 모드에 맞게 UI를 조정하는 방법을 살펴보겠습니다.

---

1. 화면 회전 기본 설정

Flutter 앱은 기본적으로 세로 및 가로 모드를 모두 지원하지만, 특정 방향만 허용하도록 설정할 수도 있습니다. 이를 위해 Android와 iOS의 네이티브 설정을 변경할 수 있습니다.

(1) Android에서 화면 방향 설정

Android에서는 AndroidManifest.xml 파일에서 화면 방향을 설정할 수 있습니다.

<activity
    android:name=".MainActivity"
    android:label="flutter_app"
    android:screenOrientation="portrait">
</activity>

위 코드에서 android:screenOrientation="portrait"를 설정하면 앱이 항상 세로 모드에서 실행됩니다. 반대로 landscape로 설정하면 가로 모드에서만 실행됩니다.

(2) iOS에서 화면 방향 설정

iOS에서는 ios/Runner/Info.plist 파일을 수정하여 특정 화면 방향을 지원할 수 있습니다.

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>

위 설정에서는 앱이 세로 모드에서만 실행되도록 제한합니다.

---

2. Flutter에서 화면 회전 제어

Flutter에서 화면 회전을 동적으로 제어하려면 SystemChrome.setPreferredOrientations를 사용합니다.

(1) 특정 방향만 허용

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp, // 세로 모드만 허용
  ]).then((_) {
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('세로 모드 고정')),
      body: Center(child: Text('이 앱은 세로 모드에서만 실행됩니다.')),
    );
  }
}

위 코드에서는 DeviceOrientation.portraitUp을 설정하여 앱이 세로 모드에서만 실행되도록 했습니다.

(2) 화면 회전 동적으로 변경

앱 실행 중 특정 화면에서만 가로 모드를 허용하려면 아래와 같이 설정할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('기본 화면')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => LandscapeScreen()),
            );
          },
          child: Text('가로 모드 화면으로 이동'),
        ),
      ),
    );
  }
}

class LandscapeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 가로 모드 설정
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);

    return Scaffold(
      appBar: AppBar(title: Text('가로 모드 화면')),
      body: Center(child: Text('이 화면에서는 가로 모드가 적용됩니다.')),
    );
  }
}

이렇게 하면 특정 화면에서는 가로 모드가 적용되고, 다른 화면에서는 기본 세로 모드로 유지됩니다.

---

3. 화면 방향에 따른 레이아웃 변경

앱이 화면 회전에 따라 다른 UI를 표시하려면 MediaQuery.of(context).orientation을 활용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OrientationLayout(),
    );
  }
}

class OrientationLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(title: Text('화면 회전 감지')),
      body: orientation == Orientation.portrait
          ? Center(child: Text('세로 모드', style: TextStyle(fontSize: 24)))
          : Center(child: Text('가로 모드', style: TextStyle(fontSize: 24))),
    );
  }
}

위 코드에서는 MediaQuery.of(context).orientation을 사용하여 화면 회전 상태를 감지하고, 세로 모드와 가로 모드에서 서로 다른 UI를 표시하도록 설정했습니다.

---

결론

Flutter에서 화면 회전을 지원하는 방법은 여러 가지가 있으며, 다음과 같이 다양한 방법을 활용할 수 있습니다.

• 기본 설정: Android의 AndroidManifest.xml 및 iOS의 Info.plist에서 화면 방향 제한
• 코드 제어: SystemChrome.setPreferredOrientations을 사용하여 동적으로 화면 회전 제한
• UI 조정: MediaQuery.of(context).orientation을 사용하여 레이아웃 변경

이제 Flutter에서 화면 회전을 제어하고, 다양한 장치에서 최적화된 UI를 제공해 보세요!