[Flutter] MediaQuery 클래스

📍 MediaQuery

앱의 화면 크기, 방향, 화면 배율, 텍스트 배율 등과 같은 다양한 화면 관련 정보를 제공하는 위젯으로 해당 위젯을 쓰는 가장 대표적인 이유는 현재 기기의 화면 크기를 구하기 위함이다. 그리고 이를 통해 반응형 디자인을 쉽게 구현할 수 있다.

LayoutBuilder와 기능이 거의 비슷하다고 한다.
그런데 LayoutBuilder를 쓰는 경우는 거의 없고, 대부분 MediaQuery를 사용하는 듯!
공식페이지에서도 MediaQuery가 더 낫다고 해서 그런가...

✔ 제공하는 것들

① 장치 정보
: 디바이스의 픽셀 비율, 밝기, 방향 등 현재 미디어의 크기에 대한 데이터를 제공

② 접근성 (Accessibility)
: 사용자가 커스텀하게 설정한 접근성에 대한 정보를 제공

③ 안전 영역 (Safe Area)
: 화면 노치나 둥근 모서리 등에 가려지는 부분에 대한 데이터를 제공

• MediaQuery를 이용해 화면 정보를 읽는 방법

MediaQuery.of(context).size             //앱 화면 크기 
MediaQuery.of(context).size.height      //앱 화면 높이 
MediaQuery.of(context).size.width       //앱 화면 넓이 
MediaQuery.of(context).devicePixelRatio //화면 배율
MediaQuery.of(context).padding.top      //상단 상태 표시줄 높이

• 예제

// 화면 크기 및 방향 정보 제공:
// 현재 화면의 너비와 높이를 쉽게 얻을 수 있음.
// 이는 다양한 화면 크기에 맞게 레이아웃을 조정하는 데 유용
final Size size = MediaQuery.of(context).size;
final double screenWidth = size.width;
final double screenHeight = size.height;