반응형 디자인 (MediaQuery)

🖥️ MediaQuery

현재 기기의 스크린 사이즈를 출력하고 싶다면..

MediaQuery.of(context).size.width;  //폭 (LP단위)
MediaQuery.of(context).size.height;  //높이 (LP단위)
MediaQuery.of(context).padding.top;  //기기의 상단바 부분 높이 (LP단위)
MediaQuery.of(context).devicePixelRatio;  //이 기기는 1LP에 픽셀이 몇개 들어있는지

• context는 MaterialApp이 들어있으면 된다.
• 1LP는 1/38cm이다.
• devicePixelRatio는 2, 3.4 등등 숫자가 출력, 고해상도의 기기일수록 높다.
  고해상도는 같은 공간에 픽셀을 많이 쑤셔넣기 때문

ex) 화면 폭이 600이 넘으면 fontsize를 30으로 키워주세요!

Text(
  '글자임', 
  style: TextStyle(
    fontSize: MediaQuery.of(context).size.width > 600 ? 30 : 16, 
  )
) 

이렇게 하거나

fontsize1(c){
  if (MediaQuery.of(c).size.width > 600){
    return 30;
  } else {
    return 16;
  }
} 

...


Text(
  '글자임', 
  style: TextStyle(
    fontSize: fontsize1(context), 
  )
) 

이렇게 함수로 빼서 쓰자

🖼️ 그러면 이미지는?

로고 같은 중요한 이미지는 해상도별로 준비해두면 좋다.
assets 폴더 안에 이런식으로 이미지를 준비해놨다고 하면,

assets/my_icon.png
assets/2.0x/my_icon.png
assets/3.0x/my_icon.png
assets/4.0x/my_icon.png

(50px짜리 로고가 있다면 2.0x 폴더에는 100px로 만들고 저장)
이렇게 하면
MediaQuery.of(context).devicePixelRatio가 1~2면 2.0x에 있는 이미지를 쓰고
MediaQuery.of(context).devicePixelRatio가 2~3이면 3.0x에 있는 이미지를 쓰면된다.

🗂️ 관련 라이브러리

auto_size_text
responsive_sizer