[Flutter][Package] 초보를 위한 간단하게 기기 해상도를 지원해보자

이번글은 MediaQuery 대신 간편하게 screenutil 패키지로 기기 해상도를 지원해보는 글입니다

많은 초보분들의 프로젝트를 보다보면 위젯 크기를 고정값으로 준 경우가 많더라고요

그러지 마시고 이 패키지 한번 적용해보는것도 좋을것같습니다

 

https://pub.dev/packages/flutter_screenutil

flutter_screenutil | Flutter package

 

이걸 왜 도입하게 되었는가?

정보 글에 안 어울리는 내용인거같긴 한데 아무튼...

평소처럼 MediaQuery를 통해 일일히 레이아웃을 잡아주던 저는

팀원들과 토이 프로젝트를 진행하기로 하였는데
일정이 계속 밀리다가 결국 일주일내에 해결해야되는 상황에 직면했습니다

하지만 MediaQuery를 사용하다가는 당일날까지 마무리를 못하게 될거같아서

빠르게 해상도 지원을 할수있는 패키지를 찾아보게 되었습니다

---

장단점?

장점은 일단 피그마 디자인 그대로 뷰를 하나 완성하게 되면 알아서

비율이 늘어나거나 줄어들어서 디자이너와의 불화가 줄어들수있는거같습니다

(없다고는 안했다....)

 

그리고 뷰를 생각없이 짤수있는게 편하다?

물론 나중가면 수정할 상황이 몇가지 생기지만 레이아웃 처음 잡아주는 단계에서는 좀 있어보이는 개발자처럼 후다닥 만들어버릴수있습니다

 

단점은 제가 라이브러리에 미숙한 부분도 없지 않아 있는거같은데 태블릿 같은 큰 레이아웃 잡을때 일부 뷰들이 디자인과 완전히 맞지않아서 수정해줘야된다는 점이 있는거같습니다

또 한가지 단점으로는 이 라이브러리가 너무 편해서 적응되어버리면 다른 방식으로 Responsive Layout 지원하기 귀찮아집니다...

이전에 진행했던 프로젝트 열때마다 한숨이 나오네요;;

---

사용법

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      // Use builder only if you need to use library outside ScreenUtilInit context
      builder: (_ , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }
}

공식 문서에서 가져온 내용인데 살펴보면

designSize는 바탕이 되는 프레임 크기(보통 디자이너가 짠 앱 레이아웃 width, height 적으면 됩니다)

minTextAdapt는 폰트 사이즈 자동조정 옵션입니다

splitScreeMode는 분할 화면 지원여부라고 합니다

 

그리고 이제 높이, 길이 줄때 그냥 고정값 뒤에 .w나 .h를 주시면 됩니다

 

예시로

double height = 200.h
double width = 70.w

이런식으로 주면 됩니다

폰트사이즈는 .sp로 주면 됩니다

 

이렇게 flutter_screenutil을 알아봤는데요

개인적으로는 빠른 진행이 필요한 프로젝트나 혹시 본인이 플러터에 익숙하지않다 싶으면 도입해보는것도 좋은 경험이라고 생각됩니다

하지만 플러터로 오래 유지보수할 프로그램이라면 별로 추천은 못 할거같습니다

 

앞에서 할 일을 뒤로 미룬 찝찝함이랄까요?

또한 플러터 개발 실력 향상에 도움이 많이 되진 않았습니다

앞서 말했듯이 너무 편해서 이것만 쓸 생각이 들 정도였습니다

 

하지만 가끔식 자잘한 오류들이 많이 생기는거같습니다..

결국 나중에 가서 일부 레이아웃에서 계속 오류가 나서 결국 원상복구 했던 패키지였네요

물론 해결 방법이야 찾으면 나올테지만 당시에 전 정말 빠른 개발이 필요했던 상황이여서 어쩔수가 없었네요..

다음에 다시 한번 적용할 계기가 있다면 그때는 더욱 자세히 글을 써보도록 하겠습니다

긴 글 읽어주셔서 감사합니다