MediaQuery

1. 현재 장치 디바이스의 화면 크기, 픽셀 비율, 화면 방향 등과 같은 디바이스 정보를 제공하는 클래스

2. 기본형

MediaQuery.of(context)

3. 주요 속성과 간단한 예시 코드

1) size: 디바이스 화면 크기를 나타내는 속성

 Size screenSize = MediaQuery.of(context).size;
 print('화면 크기: $screenSize');

2) devicePixelRatio: 현재 디바이스의 픽셀 비율

 double pixelRatio = MediaQuery.of(context).devicePixelRatio;
 print('픽셀 비율: $pixelRatio');

3) orientation: 화면 방향을 나타내는 속성으로, Orientation.portrait 또는 Orientation.landscape 값을 가진다.

 Orientation screenOrientation =     MediaQuery.of(context).orientation;
 if (screenOrientation == Orientation.portrait) {
   print('세로 방향');
 } else {
   print('가로 방향');
 }

4) platformBrightness: 플랫폼의 밝기를 나타내며,
Brightness.light 또는 Brightness.dark 값을 가진다.

 Brightness platformBrightness =   MediaQuery.of(context).platformBrightness;
 if (platformBrightness == Brightness.light) {
   print('라이트 모드');
 } else {
   print('다크 모드');
 }

5) padding: 디바이스 화면의 여백(padding),
일반적으로 SafeArea와 함께 사용된다.

 EdgeInsets devicePadding = MediaQuery.of(context).padding;
 print('디바이스 여백: $devicePadding');

6) Example 1

//박스의 가로 길이, 장치 화면 너비의 50%만 적용할 것  : 
width : MediaQuery.of(context).size.width * 0.5
//박스의 세로 길이, 장치 화면 너비의 30%만 적용할 것  :  
height: MediaQuery.of(context).size.height * 0.3

7) Example 2

Padding(
  padding: const EdgeInsets.only(left: 10.0),
    child: Image.asset(
        "assets/step01.jpg",
         width: MediaQuery.of(context).size.width * 0.3
         ),
       ),

3. MediaQuery는 다양한 디바이스 환경에서 앱을 만들 때 유용한 도구로, 반응형 디자인을 쉽게 구현할 수 있도록 도와준다. 현재 디바이스의 특성에 따라 레이아웃이나 스타일을 동적으로 조절하려면 MediaQuery를 활용하자.