[Flutter][Package] ScreenUtil 패키지

개요

---

앱 개발을 하다보면 해상도 대응이 상당히 까다롭다.

디자이너가 준 화면을 구현하고, 실제 기기에서 보면 뭔가 이상할 때가 많다.

이는 해상도가 맞지 않아, UI 배치가 조금씩 틀어지면서 생기는 문제다.

 

각 기기마다 해상도가 다르기 때문에 모든 기기에 맞게 코드를 작성하는 것은 어렵다.

이를 위해 iOS에선 Auto Layout과 같은 방법론이 등장했다.

 

하지만 Flutter에서는 어떨까?

 

Flutter에서도 padding을 사용하여 CSS나 iOS와 같이 해상도 대응을 할 수 있다.

일반적으로는 이게 정석인데, 약간의 꼼수를 사용할 수 있다.

 

바로 ScreenUtil 패키지를 이용하는 것이다.

 

 

ScreenUtil 이란?

---

ScreenUtil 패키지는 해상도를 자동 대응해주는 패키지이다.

기준 화면을 설정하면, 이를 기준으로 해상도를 배율하여 적용해준다.

기준 사이즈에서 배율

 

 

기준 화면보다 더 큰 화면이 나오게 되면, 가로와 세로를 늘어난 배율만큼 곱하여 적용해준다.

반대로 더 작은 화면이 나오게 되면, 가로와 세로를 줄어든 배율만큼 곱하여 적용해준다.

 

이를 사용하여 UI를 짜게 되면 늘어난/줄어든 만큼 자동으로 UI가 구성되기 때문에 구현에 있어 굉장히 편리해지며 디자이너와의 불화가 줄어든다. (불화가 없어지진 않는다.) ▼

흑흑... / 해삐해삐

 

 

ScreenUtil 사용 방법

---

설치

아래의 명령어를 터미널에서 프로젝트 폴더로 이동하여 입력해주면 된다.

flutter pub add flutter_screenutil

 

혹은 pubspec.yaml에 아래와 같이 넣어주면 된다.

dependencies:
  flutter_screenutil: ^5.9.0

 

import

사용할 때는 아래와 같이 Import 해주면 된다.

import 'package:flutter_screenutil/flutter_screenutil.dart';

 

사용법

초기화 : ScreenUtilInit

가장 먼저 main의 `MaterialApp` 을 `ScreenUtilnit` 으로 감싸줘야한다.

기본적으로 넣어줄 것은 두 가지인데, 하나는 `designSize` 필드, 다른 하나는 `builder` 다.

 @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690),
      builder: () => MaterialApp(
        title: 'ScreenUtil Test',
        home: MyHomePage(title: 'ScreenUtil Test'),
      ),
    );
  }

 

`designSize` 에는 `Size(width, height)` 로 기준이 될 사이즈를 넣어줘야한다.

`builder` 에는 위의 코드와 같이 `MaterialApp()` 을 반환할 수 있게 해주면 된다.

 

사용 : `.w`, `.h`, `.r`, `.sp`

이후 사용을 할 때는 뒤에 `.w`, `.h`, `.r`, `.sp` 를 붙여서 사용한다.

 

• `.w` : 너비를 기준으로 배율을 적용한다.
• `.h` : 높이를 기준으로 배율을 적용한다.
• `.r` : 너비와 높이 중 작은 값으로 배율을 적용한다.
• `.sp` : 화면 사이즈를 기준으로 font-size에 배율을 적용한다.

 

그 외에도 `sw`, `sh` 라는 속성도 있다.

• `.sw` : screen width
  `0.3.sw` 와 같이 사용할 수 있고, 이는 기기 너비의 30%를 의미한다.
• `.sh` : screen height
  `0.3.sh` 와 같이 사용할 수 있고, 이는 기기 높이의 30%를 의미한다.

실제 사용을 할 때에는 `w`, `h`, `r`, `sp` 를 주로 사용하고 `sw`와 `sh`는 잘 사용하지 않게 된다.

`sw`, `sh`로 화면 구성을 할 생각이었다면 굳이 ScreenUtil을 가져오지 않고 `MediaQuery`를 쓰면 되기 때문이다.

 

아래는 공식 문서에서 보여주는 예시 코드이다. 

Container(
  width: 50.w,
  height:200.h
)

//If you want to display a square based on width:
Container(
  width: 300.w,
  height: 300.w,
),

//If you want to display a square based on height:
Container(
  width: 300.h,
  height: 300.h,
),

//If you want to display a square based on minimum(height, width):
Container(
  width: 300.r,
  height: 300.r,
),

 

 

사용시 주의 사항

---

가로와 세로의 길이비가 바뀔 때

일반적으로 스마트폰은 가로가 짧고, 세로가 긴 형태이다.

그렇기에 예제의 기준 사이즈도 360 * 690 으로 세로가 긴 비율로 넣어져있는데, 문제는 실행도중 가로가 더 길어지는 경우다.

 

 

"스마트폰이 물리적으로 늘어날 수 있나?"

 

 

스마트폰이 물리적으로 늘어나는건 갤럭시 폴드가 아닌 이상 불가능하지만, 우리에겐 화면 회전이 있다.

화면 회전의 의도된 기능이라면 화면 배율이 이상해질 수 있다.

화면 회전뿐만 아니라 크롬과 같은 웹 환경에서는 사용자가 가로와 세로의 길이비를 마음대로 바꿀 수 있기 때문에 이 역시도 문제가 될 수 있다.

 

예시

360 * 690 -> 690 * 360 이 된건데, 이렇게 되면 100 * 100 컨테이너의 크기가 상당히 이상해진다.

 

계산에 따르면 191 * 52 가 되는데, 정사각형을 의도했던 거라면 제대로 나오지 않게 된다.

 

 

"그러면 .r 필드를 사용하면 되는거잖아?"

(둘 중 작은 값 고정)

 

 

이것도 문제인게, 화면 회전이 되어도 100 * 100, 혹은 그 언저리로 보이게 하려던게 목적인데, 갑자기 52로 사이즈가 4배 가까이 줄어들게 된다.

 

 

그렇기에 화면 회전을 막거나, 세로를 기준으로 UI를 구성해야한다.

 

 

마치며

---

Screen Util은 해상도 대응에 있어서 굉장히 유용한 패키지이다.

하지만 사용하다보면 회의감이 들긴 한다.

화면이 커지면 단순히 위젯도 따라 커지는게 진짜 해상도 대응이라고 할 수 있을까?

이전에 사용을 했을 때는 굉장히 편리하긴 했지만, 디자인적으로 약간 이상하긴 했다.

세로가 더 길어지는 Z플립 같은 경우엔 모양새가 약간 이상해지기도 하여 이걸 쓰는게 맞는지 잘 모르겠다는 생각도 들었다.

게다가 Screen Util을 사용하다보면 가로나 세로에 고정된 값을 넣는데, 다른 데서 이렇게 개발을 했다가 장기적으로는 좋지 않을거 같다는 이야기를 듣기도 해서 생각이 깊어졌다.

지금은 사용하지 않고 개발을 하고 있긴한데, 확실히 편리한 만큼 그 대가가 따를거 같다는 생각이 강해지는 추세긴 하다.

 

그럼에도 빠르게 개발할 때는 이보다 더 좋은 패키지는 없다고 생각하여 상황에 맞게 잘 사용하면 될 거 같다.