[플러터] 위젯 반응형으로 개발하기

ScreenUtil

스마트폰의 크기는 천차만별이다.

overflow가 발생하지 않게 하기 위해 일반적으로 MediaQuery를 이용해 size를 설정하곤 한다.

하지만 더 간단하고 디자이너와 쉽게 연계할 수 있는 패키지가 존재한다.

 

flutter_screenutil | Flutter Package

 

해당 패키지의 원리는 간단하다.

기준이 되는 스크린 사이즈를 설정해놓고 해당 함수로 위젯의 사이즈를 설정하면 비율을 계산해

앱이 동작하는 디바이스 스크린 사이즈에서 비율에 맞게 위젯 사이즈를 부여해준다.

즉, MediaQuery를 사용한 것과 동일하지만 길어지는 수식을 간단히 정리해준 패키지이다.

 

또, 모바일 OS에서 제공해주는 글자 크기 변경 기능을 무시하고 폰트 사이즈를 설정해주는 주요 기능이 있다.

 

 

사용법

return ScreenUtilInit(
      designSize: Size(360, 690),
      allowFontScaling: false,
      child: MaterialApp(

앱의 최상단 위젯을 위와 같이 감싸준다.

Size에는 기준이 되는 디바이스의 크기를 삽입한다.

 

width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
fontsize:ScreenUtil().setSp(15),

width: 50.w,
height: 200.h
fontsize: 15.sp

width와 height를 부여할 때, 위와 같은 형태로 작성하면 모든 디바이스에서 비율이 자동 조절된다.

두 가지 방법 모두 동일하다.