- 앱이 실행되는 현재 디바이스와 환경 정보를 얻기 위해 사용되는 위젯이다.
- 이는 단순히 웹의
CSS MediaQuery처럼 반응형을 위한 역할을 넘어 Flutter 위젯 트리 내에서 환경적 제약 조건을 인식하고 UI를 동적으로 조정하는 핵심 도구이다.
- 즉
MediaQuery는 화면의 맥락을 파악하고 그에 따라 UI를 반응형으로 조정하는 기반이다.
⚙️ 작동 원리
MediaQuery.of(context)를 호출하면 현재 위젯이 속한 BuildContext를 기준으로 해당 시점의 화면 정보가 담긴 MediaQueryData 객체를 반환한다.- 이 객체는 화면 회전, 키보드 등장, 시스템 UI 변경 등 환경 변화가 감지될 때마다 자동으로 업데이트되어 이를 사용하느 위젯이 자동으로 리빌드된다.
📏 주요 속성 정리
size
- 논리 픽셀 기준의 화면 크기 (가로 • 세로), 반응형 비율 계산의 기준
Orientation
Portrait / landScape 값으로 화면 방향에 따라 열 수 • 배치 분기 결정
devicePixelRatio
- 물리 픽셀 대비 논리 픽셀 비율
- 정밀한 그래픽 드로잉에 사용
Padding
- 상태 바 • 홈 인디케이터 등 항상 가려지는 시스템 영역
safeArea가 활용
viewPadding
- 키보드 유무와 관계없는 영구 시스템 패딩
- 상단 상태 바 높이 확인 시 사용
viewInsets
- 키보드처럼 일시적으로 침범하는 영역
viewInsets.bottom으로 키보드 높이 확인
textScaler(textScaleFactor)
- 접근성 설정에 따른 폰트 크기 비율
- 텍스트 및 버튼 UI의 균형 유지
platformBrightness
- 시스템의 라이트 / 다크 모드 상태 반환
Theme.of(context).brightness로 관리 권장
🛟 safeArea와의 관계
MediaQuery.padding은 iOS의 노치, Android의 상태 표시줄처럼 시스템 UI에 의해 가려지는 영역을 알려준다.safeArea는 내부적으로 이 값을 이용해 콘텐츠가 항상 시스템 UI에 가려지지 않게 안전하게 표시되도록 자동 처리한다.
⌨️ 키보드 대응
MediaQuery.viewInsets.bottom은 소프트 키보드가 올라올 때의 높이를 알려준다.- 이를 이용하면 입력창이 키보드에 가려지지 않도록 화면을 자연스럽게 올릴 수 있다.
final keyboardHeight = MediaQuery.viewInsetsOf(context).bottom;
return Padding(
padding: EdgeInsets.only(bottom: keyboardHeight),
child: TextField(...),);
🔁 자동 리빌드 특징
MediaQuery.of(context)는 상속된 위젯의 일종이다.- 따라서 기기가 가로 ↔︎ 세로 회전, 시스템 글자 크기 변경, 키보드 등장 등 환경이 바뀌면 관련 위젯이 자동으로 리빌드된다.
final deviceWidth = MediaQuery.sizeOf(context).width;
💡 정리
MediaQuery는 Flutter 반응형 UI의 출발점이다.- 화면 크기, 방향, 안전 영역, 키보드, 접근성 등 모든 환경적 정보를 담은 핵심 객체로 이를 기반으로 디바이스마다 유연하게 적응하는 UI를 구현할 수 있다.
