[Flutter] ScreenUtilInit

📍 ScreenUtilInit

해상도를 자동 대응해주는 패키지로 화면 크기에 따라 UI를 자동으로 조정하는데 도움을 주는 초기화 위젯이다. 주로 반응형 디자인을 구현할 때 사용한다.

---

매개변수

① designSize
: 디자인 기준이 되는 화면 크기

② minTextAdapt
: 텍스트 크기가 최소 크기로 조정되는지 여부를 결정

③ splitScreenMode
: 스플릿 화면 모드에서 UI가 올바르게 작동하도록 함

④ builder
: 실제 앱의 UI를 빌드하는 함수

---

사용법

• 초기화 : ScreenUtilInit
  • 가장 먼저 main의 MaterialApp을 ScreenUtilnit으로 감싸준다.
  • 기본적으로 넣어줄 것은 2가지! designSize , builder
    • designSize → Size(width, height) 기준이 될 사이즈
    • builder → MaterialApp( ) 을 반환

  @override
  Widget build(BuildContext context) {
  
    return ScreenUtilInit(  		// screenutil 적용
      designSize: Size(360, 790),  // 디자인된 앱 프레임 사이즈에 맞춰 적용
      minTextAdapt: true, 		   // 텍스트 크기를 자동으로 조정해 화면에 맞추는 기능을 활성화
      splitScreenMode: true,       // 분할 화면 모드를 활성화
      // 최상단 위젯
      builder: () => MaterialApp(
        title: 'ScreenUtil example',
        home: MyHomePage(title: 'ScreenUtil example'),
      ),
    );
  }

 

• 사이즈 설정

double width = 100.w // 숫자 뒤 + .w → designSize 기준 가로 길이가 됨
double height = 300.h // 숫자 뒤 + .h → esignSize 기준 세로 길이가 됨
double textSize = 15.sp // 숫자 뒤 + .sp → designSize 기준 폰트 크기가 설정됨

// 이 외 .sw .sh .r 

---

• 사용 시 유의
  • 화면의 가로가 길어질 경우
  • 가로모드 (화면 회전)
  • 폰트사이즈