Flutter에서 MediaQuery를 사용하는 방법은 무엇인가요?

자주 묻는 질문(FAQ) – Flutter에서 MediaQuery 사용법

1. Q: MediaQuery란 무엇인가요?
A: MediaQuery는 현재 화면의 크기, 방향, 해상도, 텍스처 배율(textScaleFactor) 등 디바이스 및 뷰포트(viewport) 정보를 제공하는 Flutter 위젯입니다. 이 정보를 바탕으로 반응형 UI를 구현할 수 있습니다.

2. Q: MediaQuery를 어떻게 import하고 사용하나요?
A:
1) import 구문
import 'package:flutter/widgets.dart';
2) 사용 예시
BuildContext가 필요한 곳에서
MediaQueryData data = MediaQuery.of(context);
width = data.size.width;
height = data.size.height;

3. Q: MediaQueryData의 주요 속성은 무엇인가요?
A:
• size
– width, height: 화면 너비와 높이
• devicePixelRatio
– 픽셀 배율(화면 해상도)
• orientation
– 화면 방향(Orientation.portrait 또는 landscape)
• padding
– 상태바나 노치 영역 같은 안전 여백
• viewInsets
– 키보드나 시스템 UI에 의해 가려진 영역
• textScaleFactor
– 사용자 설정 텍스트 크기 배율

4. Q: 화면 너비·높이에 따라 위젯 크기를 조절하려면?
A: 예를 들어 화면 너비의 50%로 박스를 만들 때
Widget build(BuildContext context) {
final mq = MediaQuery.of(context);
final boxWidth = mq.size.width * 0.5;
return Container(
width: boxWidth,
height: 100,
color: Colors.blue,
);
}

5. Q: 화면 회전(orientation) 감지 예제는?
A:
Widget build(BuildContext context) {
final orientation = MediaQuery.of(context).orientation;
if (orientation == Orientation.portrait) {
return Text('세로 모드');
} else {
return Text('가로 모드');
}
}

6. Q: 키보드가 올라올 때 레이아웃을 조정하려면?
A: viewInsets.bottom을 사용하여 키보드 높이를 구함
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom
),
child: TextField(),
);
7. Q: 다크모드·플랫폼 정보는 어떻게 확인하나요?
A:
final brightness = MediaQuery.of(context).platformBrightness;
// Brightness.light 또는 Brightness.dark
final platform = Theme.of(context).platform;
// TargetPlatform.android, ios 등

8. Q: MediaQuery 사용 시 주의사항은?
A:
1) BuildContext가 MaterialApp 또는 WidgetsApp 아래에 있어야 함
2) 너무 자주 호출하면 성능에 영향 가능—값을 지역 변수에 저장해 재사용 권장
3) 위젯 트리 상위에 MediaQuery가 없으면 예외 발생

9. Q: LayoutBuilder나 FractionallySizedBox와 비교하면?
A:
• LayoutBuilder
– 부모 제약(constraints)을 기준으로 레이아웃 조정
• FractionallySizedBox
– 부모 크기의 비율 지정
• MediaQuery
– 전체 디바이스 또는 뷰포트 정보를 기준으로 함
상황에 따라 적절한 API를 선택해 사용하는 것이 좋습니다.

10. Q: 실제 간단 예제 전체 코드
A:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final mq = MediaQuery.of(context);
return Scaffold(
appBar: AppBar(title: Text('MediaQuery FAQ')),
body: Center(
child: Container(
width: mq.size.width * 0.8,
height: mq.size.height * 0.3,
color: Colors.green,
alignment: Alignment.center,
child: Text(
'Orientation: ${mq.orientation}\n'
'Pixel Ratio: ${mq.devicePixelRatio}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16 * mq.textScaleFactor,
color: Colors.white
),
),
),
),
);
}
}
→ 위 예제에서 MediaQuery.of(context)로 다양한 정보를 참조해 반응형 UI를 만들 수 있습니다.

Flutter에서 `MediaQuery`는 화면의 크기, 방향, 텍스트 크기, 픽셀 밀도 등과 같은 다양한 미디어 관련 정보를 제공하는 위젯입니다.

이를 통해 앱의 UI를 다양한 화면 크기와 해상도에 맞게 조정할 수 있습니다.

`MediaQuery`를 사용하는 방법에 대해 자세히 알아보겠습니다.

1. MediaQuery의 기본 개념 `MediaQuery`는 Flutter의 위젯 트리에서 상위 위젯으로부터 하위 위젯으로 미디어 정보를 전달합니다.

이를 통해 하위 위젯은 현재 화면의 크기와 특성을 기반으로 적절한 레이아웃을 구성할 수 있습니다.



2. MediaQuery 사용하기 `MediaQuery`를 사용하기 위해서는 `MediaQuery.of(context)` 메서드를 호출하여 현재 컨텍스트의 미디어 정보를 가져올 수 있습니다.

이 메서드는 `BuildContext`를 인자로 받아 해당 컨텍스트에 대한 `MediaQueryData` 객체를 반환합니다.

예제 코드 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('MediaQuery Example')), body: MyHomePage(), ), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { // MediaQuery를 사용하여 화면 크기 가져오기 final mediaQuery = MediaQuery.of(context); final screenWidth = mediaQuery.size.width; final screenHeight = mediaQuery.size.height; return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Screen Width: $screenWidth'), Text('Screen Height: $screenHeight'), SizedBox(height: 20), Container( width: screenWidth * 0.8, // 화면 너비의 80% height: screenHeight * 0.3, // 화면 높이의 30% color: Colors.blue, child: Center(child: Text('Responsive Container')), ), ], ), ); } } ```

3. MediaQuery의 주요 속성 `MediaQueryData` 객체는 여러 유용한 속성을 제공합니다: - `size`: 화면의 크기를 나타내는 `Size` 객체입니다.

`width`와 `height` 속성을 통해 화면의 너비와 높이를 알 수 있습니다.

- `orientation`: 화면의 방향을 나타내는 `Orientation` 객체입니다.

`Orientation.portrait` 또는 `Orientation.landscape` 값을 가집니다.

- `devicePixelRatio`: 화면의 픽셀 밀도를 나타내는 값입니다.

이 값은 화면의 물리적 픽셀 수와 논리적 픽셀 수의 비율을 나타냅니다.

- `textScaleFactor`: 사용자가 설정한 텍스트 크기 비율을 나타냅니다.

이 값을 사용하여 텍스트 크기를 조정할 수 있습니다.



4. MediaQuery를 통한 반응형 디자인 `MediaQuery`를 사용하면 다양한 화면 크기에 맞춰 UI를 조정할 수 있습니다.

예를 들어, 화면 크기에 따라 다른 레이아웃을 적용하거나, 특정 요소의 크기를 조정할 수 있습니다.

예제: 화면 크기에 따라 다른 레이아웃 적용 ```dart @override Widget build(BuildContext context) { final mediaQuery = MediaQuery.of(context); final isPortrait = mediaQuery.orientation == Orientation.portrait; return Center( child: isPortrait ? Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Portrait Mode'), // 추가 위젯 ], ) : Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Landscape Mode'), // 추가 위젯 ], ), ); } ```

5. MediaQuery의 활용 - 반응형 레이아웃 : 다양한 화면 크기에 맞춰 UI를 조정할 수 있습니다.

- 사용자 설정 반영 : 사용자가 설정한 텍스트 크기나 화면 방향에 따라 UI를 동적으로 변경할 수 있습니다.

- 디자인 일관성 유지 : 여러 화면에서 일관된 디자인을 유지할 수 있도록 도와줍니다.

결론 Flutter에서 `MediaQuery`는 반응형 디자인을 구현하는 데 매우 유용한 도구입니다.

다양한 화면 크기와 해상도에 맞춰 UI를 조정하고, 사용자 설정을 반영하여 더 나은 사용자 경험을 제공할 수 있습니다.

`MediaQuery`를 적절히 활용하여 다양한 디바이스에서 일관된 UI를 유지하는 것이 중요합니다.