[Flutter]flutter_screenutil 사용방법, 반응형 앱 만들기

반응형 앱을 만들기 전 어떤 라이브러리를 선택할 것인지 비교는 아래글 확인!

[Flutter]반응형 앱, flutter_screenutil vs responsive_framework

 

flutter_screenutil을 이용하여 반응형 앱을 만들로 선택을 했다. 

flutter_screenutil를 선택한 이유는 likes가 제일 많기도 하고, 

필자 스스로가 반응형에 대해서 지식이 부족하기도 하고, 빠르게 반응형을 적용 시키는게 목표였다. 

그래서 flutter_screenutil를 선택했다. 

 

1. 라이브러리 설치

flutter_screenutil | Flutter package

터미널 창에 아래 명령어를 입력한다. 

flutter pub add flutter_screenutil

 

2. ScreenUtilInit

MaterialApp을 ScreenUtilInit으로 감싸주면 된다. 

필자는 Getx를 사용하고 있어, 

GetMaterialApp을 아래 처럼 감싸 주었다. 

  return ScreenUtilInit(
      designSize: const Size(360, 800),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return GetMaterialApp(
          navigatorObservers: [fireBaseObserver],
          getPages: AppPages.pages,
          home: FlavorBanner(
            show: kDebugMode,
            child: WelcomePage(),
          ),
          theme: theme,
        );
      },
    );

 

2-1. ScreenUtilInit 속성 값 

• designSize : 앱을 디자인할 때 기준이 되는 화면 크기를 설정하는 속성입니다.  -> 제일 마음에 든다. 디자이너분과의 의사소통을 확실하게 할 수 있어 좋다. 
• minTextAdapt : 작은 화면에서 텍스트가 너무 작아서 읽기 어려운 경우, 이 속성을 true로 설정하면 텍스트 크기가 조정되어 가독성이 유지된다.
• splitScreenMode : 사용자가 태블릿에서 두 개의 앱을 나란히 사용하는 경우, 이 속성을 true로 설정하면 앱이 화면의 절반만 차지하더라도 올바르게 크기 조정된다.

 

3. 적용하기 

이제 기본 세팅을 끝이 났다. 

여기서 부터는 디자인 한 위젯들에게 아래와 같이 값을 설정해주면 된다. 

 

- 위젯  heigh, width 적용

Container(
            margin: EdgeInsets.only(top: 30.h),
            width: 320.w,
            height: 90.h,
            padding: EdgeInsets.only(left: 12.w, right: 12.w, top: 16.h, bottom: 16.h),
            decoration:
                BoxDecoration(borderRadius: BorderRadius.circular(8.r), color: AppColors.gray04),
            child: Column(children[])
            )

left, right는  .w를 설정해주서, 가로 비율에 맞게 적용되도록 해주면되고, 

top, bottom은 .h를  설정해주서, 세로 비율에 맞게 적용 되도록 하면된다. 

Radius 값은 .r을 넣어 비율에 맞게 적용되도록 하면 끝.

- 폰트 적용

: Text(
       '확인해드리도록 하겠습니다.',
        style: TextStyle(
            fontSize: 12.sp, fontWeight: FontWeight.w500, color: AppColors.black03),
      ),

 

폰트는 .sp 를 넣어 비율에 맞게 적용 되도록 하면 된다.