[Flutter] Flutter ScreenUtil로 반응형 UI 쉽게 만들기

Flutter는 하나의 코드베이스로 다양한 해상도와 화면 크기를 지원할 수 있다는 장점이 있습니다. 하지만 실제로 작업하다 보면 기기마다 글자 크기, 여백, 버튼 크기가 달라 보이는 문제를 자주 겪게 됩니다.

이 문제를 가장 깔끔하게 해결해주는 라이브러리가 바로 flutter_screenutil입니다.

이 글에서는 ScreenUtil의 개념부터 실무에서 사용하는 방법까지 정리해보겠습니다.

---

1. ScreenUtil이란?

flutter_screenutil은 디자인 기준 해상도를 정해두고, 실제 기기 해상도에 맞게 자동으로 크기를 변환해주는 라이브러리입니다.

즉,

"디자이너가 준 시안 크기 그대로 코딩하면, 모든 기기에서 비슷하게 보이도록 만들어준다"

라는 개념입니다.

---

2. ScreenUtil 설치하기

pubspec.yaml에 라이브러리를 추가합니다.

 

dependencies:
flutter_screenutil: ^5.9.0

 

설치 후 flutter pub get 실행합니다.

---

3. ScreenUtil 기본 설정 (중요)

앱 시작 지점에서 반드시 ScreenUtilInit으로 감싸줘야 합니다.

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // 디자인 기준 해상도
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, child) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          home: HomePage(),
        );
      },
    );
  }
}

 

designSize는 어떻게 정할까?

• Figma / XD / Zeplin 기준 해상도 사용
• 보통 많이 쓰는 값
  • 📱 360 x 690 (Android)
  • 📱 375 x 812 (iPhone X)

---

4. ScreenUtil 사용법 정리

ScreenUtil은 확장 메서드 형태로 제공됩니다.

용도사용 방법

가로 길이	10.w
세로 길이	10.h
폰트 크기	14.sp
반지름	8.r

---

5. 실전 예제

① 텍스트 크기

Text(
        'Hello ScreenUtil',
        style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
      ),

👉 기기 크기에 따라 자동으로 글자 크기가 조절됩니다.

---

② Padding / Margin

Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
        child: Text('반응형 패딩'),
      ),

③ 버튼크기

SizedBox(
        width: 200.w,
        height: 48.h,
        child: ElevatedButton(
          onPressed: () {},
          child: Text('확인', style: TextStyle(fontSize: 16.sp)),
        ),
      )

④ BorderRadius

Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(12.r),
        ),
      )

 

---

6. GetX와 같이 사용할 때 팁

ScreenUtil은 UI 전용, GetX는 상태관리 전용입니다.

역할이 명확하게 분리되어 있어서 함께 쓰기 아주 좋습니다.

Obx(
        () => Text(controller.title.value, style: TextStyle(fontSize: 20.sp)),
      )

👉 상태는 GetX가 관리하고, 크기는 ScreenUtil이 관리합니다.

---

7. 자주 하는 실수

❌ MediaQuery와 섞어 쓰기

// 비추천
MediaQuery.of(context).size.width * 0.3

👉 ScreenUtil을 사용한다면 w / h / sp로 통일하는 것이 좋습니다.

---

❌ 디자인 기준 해상도 없이 사용

designSize가 명확하지 않으면 기기별 오차가 커집니다.

---

8. 언제 ScreenUtil을 쓰면 좋을까?

• 디자이너 시안이 있는 프로젝트
• 태블릿 / 폴드폰 대응이 필요한 앱
• 관리자 페이지 / 대시보드
• 해상도 대응이 중요한 상용 앱

---

마무리

flutter_screenutil은 Flutter에서 반응형 UI를 가장 쉽게 구현할 수 있는 라이브러리입니다.

특히 GetX + ScreenUtil 조합은

• 상태관리 ✔️
• 화면 대응 ✔️
• 코드 가독성 ✔️

모두 만족시키는 실무 최적의 조합입니다.

다음 글에서는 👉 ScreenUtil 없이 반응형 구현했을 때의 문제점 또는 👉 실무 UI 구조 예제도 정리해보겠습니다.