반응형

폰이 아니라, 아이패드에서 보고 싶다면?

웹으로 띄워서 사이즈 키워보면… 되게 끔찍행.. ㄷㄷ

큰 화면에서는 다른 스타일로 주고 싶어…

그런 것들을 반응형이라고 하는데..

반응형 레이아웃?

MediaQuery.of(context).size.width;

이렇게 쓰면, 현재 유저의 기기 화면 가로사이즈 LP 단위를 알려줌.

이거에 맞게 반응하게 만들면 되지 않을까

MediaQuery.of(context).size.width : 넓이 MediaQuery.of(context).size.height : 높이 MediaQuery.of(context).size.height : 높이 MediaQuery.of(context).devicePixelRatio : 해상도 고해상도 기기일수록 3이상으로 커짐. MediaQuery.of(context).highContrast: 고대비 옵션을 켰는가. MediaQuery.of(context).textScaleFactor : 텍스트 몇배 키웠는가.

화면이 커지면 사이드바가 보여지게 해주세요.

HomeLarge()라는 위젯을 만들어서 디자인을 해둘 것.

현재 화면의 사이즈가 600이상이면 HomeLarge 위젯으로 보여주세요

MediaQuery.of(context).size.width > 600 ? HomeLarge() : Home(data...)

화면이 커지면 텍스트 크기도 커지게 해주세요

Text(widget.jsondata[index]["content"], style: TextStyle(
  fontSize: MediaQuery.of(context).size.width > 600 ? 30 : 16
)),

변수 함수 문법을 쓸 수도 있음.

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

자자 전체적인 스타일이라면?? ThemeData 안에 넣으면 되겠지!

고해상도의 기기에서 이미지 대충 넣으면 깨져보임.

해상도 별로 다른 이미지 넣는 법.

assests/2.0x 같은 이미지 이지만, 2배로 키운 이미지를 담는다.

icon.jpg 를 가져다 쓴다고 하면 고해상도의 기기 devicePixelRatio 가 1.6~ 2.0 이라면 2.0x에 있는거 가져다씀. 3.0x 폴더도 만들어서 넣으면 더 고해상도에서 그 이미지 가져감.

반응형 유용한 패키지들

auto_size_text 이런거 쓰면

Text 위젯에서 글자가 특정 글자 수를 넘을 때

자동으로 점3개로 생략하거나, 폰트사이즈를 설정한 대로 줄이거나 그럴 수 있습니다.

responsive_sizer 이런거 쓰면

width: Adaptive.w(20) 이러면 위젯의 폭을 화면크기의 20%로 설정가능합니다.

TextStyle(fontSize: 15.sp) 이러면 글자크기를 화면크기에 비례해서 설정가능합니다.

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

https://부터 시작하는 network 이미지는 해상도에 따라 다른 이미지 가져오고 싶으면

서버가 해상도별로 이미지를 준비해놔야합니다.

그리고 이미지를 GET요청으로 가져올 때 “나 화면폭 크니까 큰 이미지 보내주세요” 라고 코드짜면 됩니다.