[Flutter] MediaQuery , MediaQueryData

✍ MediaQuery

MediaQuery 는 정의에 따르면, "미디어 쿼리가 지정된 데이터를 확인하는 하위 트리를 설정합니다." 라고 되어있다. 조금 더 쉽게 이야기하면 현재 미디어(ex. 앱 화면)에 대한 정보를 주면 데이터를 확인해주는 하위 트리를 설정해주고 우리는 그걸로 미디어에 대한 정보(MediaQueryData)를 얻을 수 있다.

 

현재 화면에 대한 미디어 정보는 다음과 같이 얻는다.

...

Widget build(BuildContext context) {
  MediaQueryData mediaData = MediaQuery.of(context); 
}

MediaQuery.of 는 BuildContext 를 기반으로 관련된 MediaQuery 를 찾을 수 없으면 예외를 발생시킨다. 이럴 경우엔 MediaQuery.maybeOf 를 사용하면 예외를 발생시키지 않고 null 을 반환하게 된다.

 

 

✍ MediaQueryData

MediaQueryData 에서 현재 미디어에 대한 정보를 얻을 수 있다.

 

 

😶 padding, viewPadding, viewInsets

EdgeInset 값을 가지는 세가지 padding, viewPadding, viewInsets 값이 있는데 padding 은 iPhone X 에서의 notch 와 같이 완전히 보이지 않을 수 있는 영역을 의미하고 viewInsets 는 키보드에 가려 보이지 않는 영역을 의미한다.

완전히 보이지 않을 수 있는 영역이란 안드로이드에서 상태바나 아이폰 하단의 보이지 않을 수 있는 영역 등을 뜻한다. 

 

padding = max(0, viewPadding- viewInsets) 이다. padding 과 viewPadding 은 viewInsets 값의 변화가 있으면 차이를 보인다.

 

 

예를 들어, 키보드가 보이지 않을 때 padding 과 viewPadding 의 bottom 값은 모두 40 으로 동일하지만

 

키보드가 위로 올라오면, viewPadding 은 40 으로 값을 유지하지만 padding 은 40 - 320 < 0 이므로 0 이 된다.

 

 

 

 

 

 

 

+ MediaQueryData.viewPadding.top = 안드로이드의 상태바 높이

 

 

😶 화면 크기

// 화면 너비와 높이
MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

// 안드로이드의 경우 화면 높이
MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top

 

 

😶 방향

// 가로 : Orientation.landscape
// 세로 : Orientation.portrait
MediaQuery.of(context).orientation

 

 

 

MediaQuery class - widgets library - Dart API

MediaQueryData class - widgets library - Dart API