기기마다 다른 화면 사이즈

이번 포스트에서는 푸념같은 여담을 해보자면, 핸드폰 화면 크기와 해상도가 천차만별인 시대에 기기마다 딱 맞는 화면을 그리는 일은 큰 골칫거리 중에 하나였습니다. 안드로이드 네이티브에서 ‘GuideLine’으로 해결했던 문제를 플러터로 넘어왔을 때에도 역시 마주쳤고 저희 개발팀에서는 스크린 사이즈 별로 위젯 사이즈를 계산해서 리턴해주는 클래스와 메소드를 만들어서 사용해보며 부족한 부분은 수정해가며 사용하기로 했습니다. 그러다가 위젯 리사이즈와 폰트 사이즈까지 맞춰주는 라이브러리를 구했고 그 라이브러리는 아래와 같습니다.

flutter_screenutil library

제가 이 라이브러리를 처음 접한건 21년 11월 기준 ‘ flutter_screenutil: ^5.0.0+2’ 입니다. 주소는 아래와 같습니다.
https://pub.dev/packages/flutter_screenutil

사용방법

위에 주소로 들어간 페이지를 읽어보시면 바로 어떻게 사용하는지 아시겠지만, 설명을 붙혀보자면 아래와 같습니다.

1. pubspec.yaml 에 라이브러리 추가

해당 라이브러리의 웹 페이지에서 아래 텍스트를 복사해서 넣어준 뒤 get 해줍니다.

2. 앱이 처음 빌드되는 시점부터 라이브러리가 적용되도록 설정하기

숫자대로 아래 코드의 주석을 따라가시면 됩니다.

1. ScreenUtilInit으로 가장 첫 시작이었던 MaterialApp을 감쌉니다.
2. UI를 만들 때 기준으로 사용했던 화면의 전체 가로/ 세로 dp 값을 넣습니다.
3. 위젯 사이즈가 조절될 수 있도록 구현

• width: UI 위젯 사이즈(숫자).w
• height: UI 위젯 사이즈(숫자).h
• fontSize: UI 폰트 사이즈(숫자).sp

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

// 1.ScreenUtilInit으로 가장 첫 시작이었던 MaterialApp을 감쌉니다.
    return ScreenUtilInit(

// 2. UI를 만들 때 기준으로 사용했던 화면의 전체 (가로/ 세로) dp 값을 넣습니다.
      designSize: Size(360, 690),
      builder: () => MaterialApp(
        ...
        theme: ThemeData(
                          primarySwatch: Colors.blue,
                          textTheme: TextTheme(

// 3. fontSize: UI 폰트 사이즈(숫자).sp
                            button: TextStyle(fontSize: 45.sp)
                          ),
                        ),
      ),
    );
  }
}