flutter screen util 을 사용하여 반응형 앱 화면 구성하기 - Flutter project setup 플러터 프로젝트

• "flutter_screenutil" 패키지 사용 
• MediaQuery 랩퍼이다. 
  
  
  특히 아래 요소들 작성할 때 좋았다.
• 앱 디자인 ( 피그마 figma .. )  수치 (  px 등 ) 적용 용이
  
  
• designSize 으로 간편 설정.
  예 ) Size ( width : 360, height : 640 ) 
  
  
• dp 사용
  ScreenUtil().screenWidth 
  Logical pixel 알아보기
  
  
• 위젯 수평 horizonal, 수직 vertical 패딩 
  예 ) padding: EdgeInsets.symmetric(horizontal: 20.w)  //  width ( left, right )  offset 설정 !
  
  
•  텍스트 크기 sp ( Scale-independent Pixels ) 적용 
  예 ) fontSize: 24.sp 

 

튜토리얼

https://youtu.be/LWteDQes4Kk

 

 

 

패키지 정보

https://pub.dev/packages/flutter_screenutil

flutter_screenutil | Flutter Package