플러터(Flutter) 의 MediaQuery 클래스란?

플러터의 MediaQuery 클래스란?

• 화면 크기 등 디바이스 미디어에 대한 정보를 제공한다.

제공하는 것들

• 장치 정보: 디바이스의 픽셀 비율, 밝기, 방향 등 현재 미디어의 크기에 대한 데이터를 제공한다.
• 접근성 (Accessibility): 사용자가 커스텀하게 설정한 접근성에 대한 정보를 제공한다.
• 안전 영역 (Safe Area): 화면 노치나 둥근 모서리 등에 가려지는 부분에 대한 데이터를 제공한다.

성능 주의사항

• 깊은 위젯 트리에서 과도하게 사용하면 성능 문제가 발생할 수 있다.
• 위젯 트리의 맨 위에서 사용하는 것이 좋다.

용례

• 키보드 영역 높이 가져오기
• 화면 사이즈 측정
• 반응형 패딩
• 방향별 레이아웃
• 안전 영역 계산

공식 문서

• MediaQuery class

예제 코드들

화면 사이즈 측정

@override
Widget build(BuildContext context) {
  var screenSize = MediaQuery.of(context).size;

  return Scaffold(
    body: Center(
      child: Text('Screen width: ${screenSize.width} \nScreen height: ${screenSize.height}'),
    ),
  );
}

반응형 패딩

@override
Widget build(BuildContext context) {
  var screenWidth = MediaQuery.of(context).size.width;

  double padding = screenWidth > 600 ? 20.0 : 10.0;

  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(padding),
      child: Text('Responsive Padding'),
    ),
  );
}

방향별 레이아웃

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

  return Scaffold(
    body: orientation == Orientation.portrait
        ? Text('Portrait mode')
        : Text('Landscape mode'),
  );
}

안전 영역 (Safe Area) 계산

@override
Widget build(BuildContext context) {
  var padding = MediaQuery.of(context).padding;
  var safeHeight = MediaQuery.of(context).size.height - padding.top - padding.bottom;

  return Scaffold(
    body: Container(
      height: safeHeight,
      child: Text('This is a safe area'),
    ),
  );
}

동적 폰트 크기 조정

@override
Widget build(BuildContext context) {
  var screenWidth = MediaQuery.of(context).size.width;

  double fontSize = screenWidth > 600 ? 24.0 : 16.0;

  return Scaffold(
    body: Text(
      'Dynamic Font Size',
      style: TextStyle(fontSize: fontSize),
    ),
  );
}