[Flutter] ScreenUtil

flutter_screenutil 패키지의 간단한 사용법입니다

ScreenUtil

• https://pub.dev/packages/flutter_screenutil
• Flutter 앱의 반응형 디자인을 지원하기 위한 패키지
• Flutter 앱은 다양한 디바이스에서 실행될 수 있으며, 디바이스마다 화면의 크기와 해상도, 픽셀 밀도가 다를 수 있음 → 고정픽셀값으로 위젯을 배치하면 앱의 UI 요소가 디바이스마다 다르게 나타날 수 있음
  
• ScreenUtil 패키지를 사용하면 픽셀 단위 대신 가상 단위를 사용하여 UI 요소를 설계할 수 있음
  • 미디어 쿼리(MediaQuery) 정보와 디바이스의 픽셀 밀도(DPI)를 사용하여 정확한 값을 계산
  • 앱의 UI 요소를 다양한 화면 크기와 해상도에 맞춰 일관성 있게 표시할 수 있다

사용법

1. 앱의 최상단 위젯 감싸주기

   designSize: 피그마에 디자인된 앱 프레임 사이즈로 맞춰서 적용하면 됨

   return ScreenUtilInit(	    // screenutil 적용
     designSize: const Size(360, 690),	   // 피그마에 디자인된 앱 프레임 사이즈로 맞춰서 적용하면 됨
     minTextAdapt: true,       // 텍스트 크기를 자동으로 조정하여 화면에 맞추는 기능을 활성화
     splitScreenMode: true,    // 분할 화면 모드를 활성화
     builder: (context , child) {
     	// 최상단 위젯
       return MaterialApp(

2. width, height, fontSize등을 부여할 때 .w .h .sp 사용하면 모든 디바이스에서 비율이 자동 조절됨

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