Flutter에서 MediaQuery.of(context)의 쓰임새와 Organize Imports 활용법

Flutter 앱 개발 시 다양한 화면 크기와 디바이스 환경에 맞춰 UI를 조절하는 방법과, 불필요한 임포트를 정리하는 Organize Imports 기능을 함께 알아봅니다.

---

 MediaQuery.of(context)란?

MediaQuery는 현재 디바이스의 크기, 해상도, 방향, 텍스트 크기 등을 가져와 UI를 유연하게 구성할 수 있게 도와주는 미디어 정보 제공 위젯입니다.

MediaQueryData mediaQuery = MediaQuery.of(context);

주요 속성

속성 설명

size	화면 크기 (width, height)
orientation	세로/가로 모드 구분
devicePixelRatio	디바이스의 픽셀 비율
padding	시스템 UI가 차지하는 영역
viewInsets	소프트키보드 등으로 가려진 영역
textScaleFactor	글자 크기 배율
platformBrightness	다크/라이트 모드

---

 MediaQuery 활용 예시

📌 화면 크기 가져오기

Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);

  return Text(
    'Width: ${mediaQuery.size.width}, Height: ${mediaQuery.size.height}',
  );
}

📌 화면 방향에 따른 레이아웃

Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);

  return mediaQuery.orientation == Orientation.portrait
      ? Column(children: [...])
      : Row(children: [...]);
}

📌 소프트키보드 영역 고려하기

final bottomInset = MediaQuery.of(context).viewInsets.bottom;

return Padding(
  padding: EdgeInsets.only(bottom: bottomInset),
  child: TextField(),
);

📌 텍스트 크기 배율 반영

final scaleFactor = MediaQuery.of(context).textScaleFactor;

return Text(
  '안녕하세요',
  style: TextStyle(fontSize: 16 * scaleFactor),
);

---

Organize Imports (임포트 정리)

Flutter 프로젝트에서 불필요한 import를 자동으로 정리하는 기능입니다.

🔹 사용 방법

• VSCode
  • Cmd + Shift + P (Mac) / Ctrl + Shift + P (Windows)
  • Organize Imports 입력 후 실행
• 단축키
  • Option + Shift + O (Mac)
  • Ctrl + Alt + O (Windows)

🔹 효과

• 사용하지 않는 import 자동 삭제
• import 정렬
• 코드 가독성 향상

🔹 예시

import 'package:flutter/material.dart';
import 'package:unused/unused.dart'; // 사용되지 않음

Organize Imports 실행 시:

import 'package:flutter/material.dart';

---

 주의사항

• MediaQuery.of(context)는 반드시 MaterialApp 이후의 context에서 호출해야 한다.
• 그렇지 않으면 No MediaQuery widget ancestor found 오류가 발생한다.

---

 결론

• MediaQuery로 반응형 UI를 쉽게 구성할 수 있다.
• Organize Imports로 코드를 깔끔하게 유지할 수 있다.
• UI 대응과 코드 관리 모두 필수적인 Flutter 개발 습관이다.

---