[Flutter] 디바이스 별로 다른 Widget의 넓이 설정하기

위젯에 넓이나 높이를 지정해줄 때 이런 식으로 넓이와 높이를 지정해준다.

Container(
	height:400,
    width:200
)

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

너비가 넓은 디바이스, 좁은 디바이스에 모두 똑같은 너비의 위젯이 된다.

이런 경우 여백에  차이가 있을 것이고 의도치 않을 수 있다.

 

MediaQuery를 활용해 디바이스의 실제 너비를 구할 수 있다.

MediaQuery.of(context).size.width;

 

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

final deviceWidth = MediaQuery.of(context).size.width;
final standardDeviceWidth = 360;
Container(
	width:200 * ( deviceWidth / standardDeviceWidth)
)

standartDeviceWidth는 내가 디자인을 할 때 기준에 맞췄던 디바이스의 너비이다.

360 너비의 디자인에 맞춰 위젯을 만들었을 때

그 위젯의 너비가 200이라면

 

 

새로운 디바이스에서는 이런 공식이 된다.

final deviceWidth = MediaQuery.of(context).size.width;

final standardDeviceWidth = 360;
final widgetWidth = 200


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

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

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

 

static double scaleWidth(BuildContext context) {
  const designGuideWidth = 360;
  final diff = getDeviceWidth(context) / designGuideWidth;
  return diff;
}
  
  
   Container(
   	height: 224 * scaleWidth(context),
   ),

위의 예시처럼 메소드를 하나 만들어두고

필요할때마다 꺼내서 쓰는 방식으로 사용하면 편하게 넓이나 높이를 지정해줄수있다.