[Flutter] 반응형 스크린 사이즈

현재 기기의 스크린 사이즈 출력하고 싶은 경우

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

 

화면 폭에 따라 위젯을 다르게 보여주고 싶은 경우

MediaQuery.of(context).size.width < 600 
  ? Home() 
  : 큰화면에서보여줄다른위젯()

 

화면 폭에 따라 스타일 변경하고 싶은 경우

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

→ 함수로 빼도 됨

(class들 바깥 아무데나)
 
fontsize1(c){
  if (MediaQuery.of(c).size.width > 600){
    return 30;
  } else {
    return 16;
  }
}

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

⇒ 한 번에 모든 글자를 스타일주고 싶다면 ThemeData() 안에 넣으면 됨

→ Theme() 위젯으로 감싸면 중간에 ThemeData()를 하나 만들 수 있는데 거기에 넣어도 됨

스타일 변경 라이브러리

• auto_size_text
  • Text 위젯에서 글자가 특정 글자 수를 넘을 때 자동으로 점 3개로 생략하거나, 폰트 사이즈를 설정한 대로 줄일 수 있음
• reponsive_sizer
  • width: Adaptive.w(20) 이러면 위젯의 폭을 화면크기의 20%로 설정 가능
  • TextStyle(fontSize: 15.sp) 이러면 글자크기를 화면크기에 비례해서 설정 가능

⇒ 근데 글자사이즈는 이렇게 하면 너무 큰 화면에선 글자가 너무 커져서 직접하는게 낫다.

assets 이미지도 해상별로 준비

• 이미지 넣고 싶으면
  • assets 폴더에 넣고 pubspec.yaml 파일에 등록하고 Image.asset() 여기서 사용
  • assets안에 2.0x 폴더랑 3.0x 폴더 만들고 거기에 똑같은 이미지를 넣음→ MediaQuery.of(context).devicePixelRatio가 1~2면 2.0x에 있는 이미지를 씀
  • → MediaQuery.of(context).devicePixelRatio가 2~3이면 3.0x에 있는 이미지를 씀
  • assets/my_icon.png assets/2.0x/my_icon.png assets/3.0x/my_icon.png assets/4.0x/my_icon.png