Flutter - ScreenUtil

보통 MediaQuery로 크기를 구성하지만 가끔은 다른 기기로 빌드 시 원치 않은 크기가 나오기도 한다.

그렇다고 width,height를 정해두자니 기기별로 모두 대응을 해주어야 하는 불편한 점이 있다.

 

ScreenUtil는 이러한 불편한 점을 고민 안해도 되게 깔끔하게 해결해 주었다.

---

사용법

1. 라이브러리 설치

https://pub.dev/packages/flutter_screenutil/install

flutter_screenutil | Flutter Package

복사한 flutter_screenutil: ^5.9.0 을 pubspec.yaml에 넣어준다.

2. Main코드에 기준이 될 크기 설정

데스크톱 모니터의 표준 크기인 1920,1080으로 기준으로 잡아주었다.

class MyWeb extends StatelessWidget {
  const MyWeb({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(1920, 1080),
      builder: (context, child) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          home: HomePage(),
        );
      },
    );
  }
}

3. 반응형으로 구성해야할 위젯의 width,height에 적용하기

width는 .w

height는 .h

fontSize는 .sp를 넣어주면 된다.

SizedBox(
        width: 700.w,
        height: 68.h,
     )