MediaQuery 위젯은 기기의 화면 크기, 방향(가로/세로), 폰트 배율, 시스템의 상태바 높이 등 기기의 물리적 정보를 가져오거나 하위 위젯에 강제로 반영할때 사용한다.

1. 기기 화면의 가로, 세로 사이즈 참조

double screenHeight = MediaQuery.of(context).size.height;
double screenWidth = MediaQuery.of(context).size.width;

2. 상단 상태바(Status bar)나 하단 노치(Notch)영역 계산시 사용,  내부적으로 SafeArea 위젯을 활용

double statusBarHeight = MediaQuery.of(context).padding.top; // 상단바 높이
double keyboardHeight = MediaQuery.of(context).viewInsets.bottom; // 키보드 높이 (showModalBottomSheet 사용시 필수)

3. 시스템 설정이 아닌 원하는 설정을 하위 위젯에 강제로 적용할때 활용

MediaQuery(
  // 하위 모든 텍스트는 시스템 설정을 무시하고 1.2배로 고정됨
  data: MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(1.2)),
  child: const MyWidget(),
)

* 주의 

MediaQuery.of(context)는 해당 컨텍스트에서 값이 변경될 때마다 리빌드(Rebuild)를 유발한다. 예) 화면회전, 키보드 노출 시 전체 위젯이 다시 그려질 수 있다.

성능 최적화가 필요하다면 MediaQuery.sizeOf(context) 처럼 특정 속성만 구독하는 메서드를 사용하면 불필요한 리빌드를 줄일 수 있다.