[Futter] 플러터 현재 디바이스의 화면 크기 알아내기(App Screen Size)

이건 굉장이 중요하다. 내가 웹개발만하다가 앱개발을 하니 퍼블리싱까지 다해야 하기 때문에 반응형으로 위젯을 만들어야 한다.

Container(
	height:500,
    width:200
)

디자인을 보고 넓이를 지정해줬거나 시뮬레이터에서 직접 만들면서 넓이를 지정해줬든 간에

너비가 넓거나 좁은 디바이스에서는 고정으로 width가 200이 된다. 이런 경우 여백에  차이가 있을 것이고 의도치 않게 화면이 이상하게 보일 수 있다. 그래서 디바이스의 사이즈를 가져와서 width 200 정도 되는 비율로 넓이를 지정해야한다.

디바이스의 사이즈를 가져오기 위해서는 MediaQuery라는 클래스를 이용한다. Mediaquery의 경우 화면 크기 외에도 여러 가지 기기의 시스템 정보들을 담고 있다. (text 배율, 24시간 포맷 유무, 기기 방향(orientation) 등등)

 

- 200의 너비를 디바이스의 크기별로 맞춰서 계산하려면 이렇게 하면 된다.

final deviceWidth = MediaQuery.of(context).size.width; // 현재 디바이스의 넓이
final standardDeviceWidth = 360; //디자인을 했던 기준의 디바이스 넓이
Container(
	width:200 * ( deviceWidth / standardDeviceWidth)
)

Container width의 결과 >>> 229.99999999999997

 

- 200의 너비를 디바이스의 크기별로 맞춰서 계산하는 공식

//공식
// 200 % 360 =  위젯의넓이 % deviceWidth
// 200 % 360 * deviceWidth = 위젯의 넓이
// 200 * ( deviceWidth/360)  = 위젯의 넓이

해당 디바이스의 너비와 360의 비율을 계산한 후 200을 곱해주면 실제 위젯의 너비가 된다.

디바이스의 너비와 360이라는 기준은 변하지 않으므로 다른 페이지, 위젯에서 재활용할 수 있다.

//BuildContext context란? 위젯 tree에서 현재 위젯의 위치를 알 수 있는 정보를 뜻한다. 
//그냥 현재 위젯인지를 구분하는 프라이머리키 같은 것.

static double getScaleWidth(BuildContext context) {
  const designGuideWidth = 360; //제플린이나 디자이너가 그렸을때의 기준 디바이스의 넓이
  final diff = MediaQuery.of(context).size.width / designGuideWidth;
  return diff;
}
  
  
Container(
  width: 224 * getScaleWidth(context),
),

BuildContext context란? 위젯 tree에서 현재 위젯의 위치를 알 수 있는 정보를 뜻한다. 그냥 현재 위젯인지를 구분하는 프라이머리키 같은 것.

 

- MediaQuery 클래스를 이용하여 디바이스 크기의 정보를 가져오기

//iPhone Pro 11 Max

print(MediaQuery.of(context).size);            //앱 화면 크기 size 결과> Size(414.0, 896.0)
print(MediaQuery.of(context).size.height);      //앱 화면 높이 double 결과> 896.0 
print(MediaQuery.of(context).size.width);       //앱 화면 넓이 double 결과> 414.0
print(MediaQuery.of(context).devicePixelRatio); //화면 배율    double 결과> 3.0
print(MediaQuery.of(context).padding.top);      //상단 상태 표시줄 높이 double 결과> 44.0

 

 

본문의 출처 https://dev-in-gym.tistory.com/51