MediaQuery
Flutter 개발을 하다가 보면 MediaQuery를 사용하는 경우가 종종 있다.
MediaQuery.of(context).size;
MediaQuery.of(context).padding;
MediaQuery.of(context).viewPadding;
MediaQuery.of(context).viewInsets;MediaQuery 와 viewPadding, viewInsets 를 많이 사용하고 있지만 정확한 의미와 사용 방법을 파악하고 있지 않아서 Flutter 문서를 번역해서 정리해 놓은 글이다.
MediaQueryData
미디어에 대한 정보입니다.
예를 들어 MediaQueryData.size 속성에는 현재 창의 너비와 높이가 포함됩니다.
주어진 BuildContext에 대한 현재 MediaQueryData를 얻으려면 MediaQuery.of 함수를 사용하십시오. 예를 들어 현재 창의 크기를 얻으려면 MediaQuery.of(context).size를 사용합니다.
범위 내에 MediaQuery가 없으면 MediaQuery.of 메서드는 예외를 throw합니다. 또는 MediaQuery.maybeOf를 사용할 수 있습니다. MediaQuery가 범위에 없는 경우 throw하는 대신 null을 반환합니다.
위의 이미지는 padding, viewPadding 및 viewInsets 가 어떻게 관련되어 있는지를 보여준다.
소프트웨어 키보드가 아래에 표시된 경우와 같이 viewInsets가 viewPadding을 초과하는 경우 padding은 음수 값이 아닌 0이 된다. 따라서 padding은 max(0.0, viewPadding - viewInsets)를 취하여 계산된다.
이 다이어그램에서 검은색 영역은 앱이 그릴 수 없는 시스템 UI를 나타낸다.
빨간색 영역은 애플리케이션이 제스처를 감지할 수 없고 그리기를 원하지 않을 수 있는 뷰 패딩을 나타낸다.
회색 영역은 표시될 때 하단 뷰 패딩을 덮을 수 있는 시스템 키보드를 나타낸다.
MediaQueryData에는 padding, viewPadding 및 viewInsets의 세 가지 EdgeInsets 값이 포함됩니다.
이러한 값은 장치의 구성을 반영하며 이러한 삽입 내에서 콘텐츠를 배치하는 위젯에서 사용하고 선택적으로 소비한다.
1️⃣ padding 값은 iPhone X의 디스플레이 "노치"와 같이 완전히 보이지 않을 수 있는 영역을 정의한다.
2️⃣ viewInsets 값은 일반적으로 장치의 키보드에 가려져 전혀 보이지 않는 영역을 정의한다.
3️⃣ viewInsets와 유사하게 viewPadding은 가려질 수 있는 영역의 padding을 구분하지 않는다. 예를 들어 viewPadding 속성을 사용하면 padding이 키보드 표시 여부에 관계없이 iPhone의 "안전 영역"을 따른다.
viewInsets 및 viewPadding은 독립적인 값이며 MediaQuery 위젯 경계의 가장자리에서 측정된다. 함께 padding 속성에 알린다. WidgetsApp에서 만든 최상위 수준 MediaQuery의 경계는 앱이 포함된 창과 동일하다.
레이아웃이 viewInsets, viewPadding 또는 padding에 의해 정의된 공간을 사용하는 위젯은 해당 속성을 같은 양만큼 줄이는 보조 MediaQuery 위젯에 자식을 포함해야 한다. removePadding, removeViewPadding 및 removeViewInsets 메서드는 이를 위해 유용하다.
viewPadding
일반적으로 하드웨어 디스플레이 "노치" 또는 시스템 상태 표시줄에 의해 시스템 UI에 의해 부분적으로 가려지는 디스플레이 부분입니다.
이 값은 시스템이 화면의 동일한 물리적 영역에 있는 다른 장애물을 보고하는지 여부에 관계없이 동일하게 유지됩니다. 예를 들어, 하단 패딩이 필요한 동일한 영역을 덮고 사용할 수 있는 화면 하단의 소프트웨어 키보드는 이 값에 영향을 미치지 않습니다.
이 값은 padding 및 viewInsets와 무관합니다. 해당 값은 MediaQuery 위젯 경계의 가장자리에서 측정됩니다. WidgetsApp에서 만든 최상위 수준 MediaQuery의 경계는 앱이 포함된 창과 동일합니다. 모바일 장치에서는 일반적으로 전체 화면입니다.
viewInsets
시스템 UI, 일반적으로 기기의 키보드에 의해 완전히 가려지는 디스플레이 부분입니다.
모바일 장치의 키보드가 표시될 때 viewInsets.bottom은 키보드 상단에 해당합니다.
이 값은 padding 및 viewPadding과 무관합니다. viewPadding은 MediaQuery 위젯 경계의 가장자리에서 측정됩니다. 패딩은 viewPadding 및 viewInsets를 기반으로 계산됩니다. WidgetsApp에서 만든 최상위 수준 MediaQuery의 범위는 앱이 포함된 창(종종 모바일 장치 화면)과 동일합니다.
padding
일반적으로 하드웨어 디스플레이 "노치" 또는 시스템 상태 표시줄에 의해 시스템 UI에 의해 부분적으로 가려지는 디스플레이 부분입니다.
이 패딩을 사용한 경우(예: 자식이 더 이상 이 패딩에 노출되지 않는 방식으로 레이아웃에서 이 패딩을 둘러싸거나 설명하는 위젯을 빌드하여) 다음을 삽입하여 위젯 트리의 후속 자손에 대해 이 패딩을 제거해야 합니다. MediaQuery.removePadding 팩토리를 사용하는 새로운 MediaQuery 위젯.
패딩은 viewInsets 및 viewPadding 값에서 파생됩니다.
간단 정리
✅ padding
노치 & 상태 표시줄 부분.
📌 단, 이 부분에서 다른 레이아웃이 보여지고 있으면 값은 0으로 변환.✅ viewInsets
기기의 키보드에 의해서 가려지는 부분.✅ viewPadding
노치 & 상태 표시줄 부분.
📌 단, 이 부분 위에 다른 레이아웃이 있어도 값은 변하지 않는다.