MediaQuery는 플러터에서 현재 화면의 크기, 방향, 밀도, 텍스트 스케일링 등과 같은 속성 정보를 가져오는 데 사용되는 중요한 위젯이다. Media라는 용어에서도 알 수 있듯, CSS의 미디어 쿼리와 비슷한 개념이며, 반응형 레이아웃을 구현하는 데에 유용하게 사용된다. 이를 이용해 다양한 화면 크기와 해상도에 대응할 수 있게 만들 수 있다.

주요 속성

1. size: 디바이스의 화면 크기를 나타낸다.

MediaQuery.of(context).size.width; // 너비
MediaQuery.of(context).size.height; // 높이

2. orientation: 화면의 방향을 나타낸다. 흔히 오리엔테이션이라 불리는 그것이며, Orientation이란 이넘 타입이다.

MediaQuery.of(context).orientation == Orientation.landscape; // 가로 모드
MediaQuery.of(context).orientation == Orientation.portrait; // 세로 모드

3. devicePixelRatio: 화면의 픽셀 밀도를 나타낸다. 화면에 픽셀이 얼마나 빽빽이 있는지를 나타낸다. 1.0이 기본값이며, 고해상도 디바이스에서는 높은 값을 가진다. 요즘 모바일 디바이스들은 대부분 1.0보다는 높은 값을 가진다.
4. padding: 화면의 가장자리와 콘텐츠 사이의 여백을 나타낸다. 모바일 디자인에서 흔히 SafeArea라 불리는 부분을 제외한 나머지 부분의 크기를 나타낸다.

MediaQuery.of(context).padding.top;
MediaQuery.of(context).padding.left;
MediaQuery.of(context).padding.right;
MediaQuery.of(context).padding.bottom;

5. viewInsets: 키보드에 의해 가려지는 영역을 나타낸다. 모바일 디바이스에서는 보통 키보드가 아래에서 올라오는데, 그렇게 가려지는 영역이다.
6. platformBrightness: 현재 디바이스의 밝기 모드를 나타낸다. 다크 모드와 라이트 모드가 있다. Brightness 이넘 타입이다. 요즘 다크 모드로 조정해 다니는 사람들이 많기에, 개인적으로 가장 유용할 것 같은 속성이라고 생각한다.

MediaQuery.of(context).platformBrightness == Brightness.light; // 라이트 모드
MediaQuery.of(context).platformBrightness == Brightness.dark; // 다크 모드

MediaQuery를 사용하여 화면의 너비에 따라 다른 텍스트를 보여주는 샘플 코드이다. screenWidth가 600보다 크면, Large Screen을, 600보다 작으면 Small Screen을 보여준다.

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width; // 화면의 너비를 가져옴
    return Scaffold(
      appBar: AppBar(title: Text('Responsive Layout')),
      body: Center(
        child: screenWidth > 600
            ? Text('Large Screen', style: TextStyle(fontSize: 24))
            : Text('Small Screen', style: TextStyle(fontSize: 16)),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: ResponsiveLayout()));

MediaQuery에 대해 알아보며 느낀 점은, CSS의 미디어쿼리와 굉장히 흡사하다는 것이었다. 다만 차이점이라면, CSS는 스타일에 한정되어 있지만, 플러터의 MediaQuery는 위젯 수준을 다룬다는 점이다. 다양한 크기의 디바이스에서 일관된 UI를 보여줘야 하는 플러터의 특성 상, MediaQuery의 사용은 필수적일 것 같다.