화면 회전에 따른 UI 변경: OrientationBuilder와 MediaQuery 활용법

Flutter는 모바일 앱 개발에서 화면 회전(가로/세로 전환)에 따라 UI가 자동으로 적응할 수 있는 강력한 기능을 제공합니다. 사용자가 기기를 세로 모드에서 가로 모드로 돌릴 때 화면 구성이 동적으로 변화하면, 사용자 경험이 더 쾌적해집니다. 이번 블로그 포스팅에서는 Flutter에서 OrientationBuilder와 MediaQuery를 사용하여 화면 회전에 따라 UI를 어떻게 변경할 수 있는지 살펴보겠습니다.

화면 회전에 따라 UI를 동적으로 변경해야 하는 이유

현대의 앱 사용자들은 스마트폰과 태블릿을 다양한 방향으로 사용합니다. 세로 모드에서는 한눈에 많은 정보를 보기 힘들지만, 가로 모드에서는 더 많은 공간을 활용할 수 있습니다. 따라서, 앱이 화면 회전에 따라 적절하게 레이아웃을 조정하는 것은 매우 중요합니다. Flutter는 이러한 요구를 충족시켜주는 강력한 도구를 제공하여, 화면 크기나 방향에 관계없이 최적의 사용자 경험을 제공합니다.

OrientationBuilder를 활용한 화면 회전 대응

OrientationBuilder는 기기의 현재 화면 방향을 감지하고 이에 따라 다른 레이아웃을 생성할 수 있는 Flutter 위젯입니다. 이 위젯을 사용하면, 사용자가 기기를 가로 모드로 돌리면 UI가 자동으로 조정됩니다. 예를 들어, 세로 모드에서는 두 개의 열을 사용하고, 가로 모드에서는 세 개의 열을 사용할 수 있습니다.

body: OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // 세로 모드에서는 2열, 가로 모드에서는 3열을 표시
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
),

이처럼 OrientationBuilder를 사용하면, 레이아웃이 화면 방향에 따라 자동으로 변경되어 가로 모드에서는 더 많은 콘텐츠를 한 화면에 표시할 수 있습니다.

MediaQuery로 더 세밀한 제어 가능

MediaQuery는 화면의 크기, 해상도, 픽셀 밀도 등 다양한 정보를 제공해 주는 또 다른 유용한 도구입니다. MediaQuery를 사용하면 단순히 방향뿐만 아니라 화면의 크기에 따라 더 정교한 레이아웃 조정이 가능합니다.

 

화면의 현재 방향을 확인하려면 다음 코드를 사용합니다:

MediaQuery.of(context).orientation

이를 활용하면 OrientationBuilder보다 더 세밀한 레이아웃 최적화가 가능합니다. 예를 들어, 가로 또는 세로 모드에 따라 padding이나 margin을 조정하거나, 특정 위젯의 크기를 변경할 수 있습니다.

특정 화면 방향으로 고정하기

일부 앱은 화면 방향을 고정해야 할 때가 있습니다. 예를 들어, 가로 모드에서만 동작하는 게임이나 동영상 스트리밍 앱이 대표적입니다. Flutter에서는 SystemChrome.setPreferredOrientations() 함수를 사용하여 화면 방향을 고정할 수 있습니다.

 

다음은 앱을 세로 모드로만 고정하는 코드입니다:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(const MyApp());
}

이 코드를 사용하면 앱이 항상 세로 모드로만 실행되며, 가로 모드로 회전하지 않도록 고정됩니다.

---

결론: Flutter에서 화면 회전에 따른 UI 최적화

Flutter에서 OrientationBuilder와 MediaQuery를 사용하면 앱이 기기의 화면 회전에 따라 유연하게 적응할 수 있습니다. 이를 통해 사용자 경험을 개선하고, 앱의 가독성과 사용성을 높일 수 있습니다. 특히, 반응형 디자인을 구현할 때 이 도구들은 매우 유용하며, 화면 크기나 방향에 상관없이 최적의 레이아웃을 제공할 수 있습니다.

 

앱을 설계할 때, 화면 회전과 같은 다양한 사용 상황을 고려하여 UI를 최적화하면, 더욱 매력적이고 직관적인 사용자 경험을 제공할 수 있습니다. Flutter의 유연한 레이아웃 시스템을 활용해 최적의 앱을 만들어보세요.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Orientation Demo';

    return const MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}

class OrientationList extends StatelessWidget {
  final String title;

  const OrientationList({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            // Create a grid with 2 columns in portrait mode, or 3 columns in
            // landscape mode.
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: Theme.of(context).textTheme.displayLarge,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}