Flutter에서 반응형 UI를 위한 필수 도구: flutter_screenutil 패키지 사용법 가이드

Flutter 앱 개발에서 다양한 화면 크기와 해상도를 지원하는 반응형 UI 구현은 필수적인 과제입니다.

하지만 기기마다 픽셀 밀도와 화면 크기가 달라지면서 UI 디자인을 일관되게 유지하기 어려울 수 있습니다.

이러한 문제를 해결하기 위한 강력한 도구가 바로 flutter_screenutil 패키지입니다.

이 블로그 글에서는 flutter_screenutil 패키지의 설치부터 기본적인 사용법까지, 다양한 기능과 활용법을 심층적으로 살펴보겠습니다.

1. flutter_screenutil 패키지 소개

flutter_screenutil은 픽셀 단위 대신 가상 단위를 사용하여 UI 요소를 디자인할 수 있도록 지원하는 Flutter 패키지입니다.

즉, 기준 화면 대비 각 기기의 화면 크기와 픽셀 밀도를 고려하여 UI 요소를 자동으로 조정해주는 기능을 제공합니다.

덕분에 개발자는 모든 화면에서 일관되고 아름다운 디자인을 구현할 수 있습니다.

2. 설치 및 기본 사용법

flutter_screenutil 패키지를 사용하려면 다음과 같은 간단한 단계를 따르세요.

 

1. pubspec.yaml 파일에 flutter_screenutil 패키지 추가

dependencies:
  flutter_screenutil: ^5.2.0

 

2. main.dart 파일에서 ScreenUtil 클래스 초기화

import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 640), // 기준 화면 크기 설정 (예시: 360x640)
      child: Builder(
        builder: (context) => MaterialApp(
          // ... 나머지 앱 코드
        ),
      ),
    );
  }
}

 

3. 가상 단위 사용

 

위 코드에서 설정한 designSize 기준으로 각 기기의 화면 크기와 픽셀 밀도를 고려하여 자동으로 계산된 가상 단위를 사용할 수 있습니다. 예를 들어, 다음과 같이 사용합니다.

Container(
  width: 100.w, // 가로 100dp (기준 화면 대비)
  height: 200.h, // 세로 200dp (기준 화면 대비)
  child: Text('텍스트 크기 16.sp'), // 글꼴 크기 16sp (기준 화면 대비)
);

 

3. 주요 기능 및 활용법

flutter_screenutil 패키지는 다음과 같은 다양한 기능과 활용법을 제공합니다.

• 다양한 가상 단위 제공: .w, .h, .sp, .r 등 다양한 가상 단위를 제공하여 상황에 맞게 사용할 수 있습니다.
• 디바이스별 픽셀 밀도 대응: 각 기기의 픽셀 밀도를 고려하여 텍스트 크기와 이미지 크기를 자동 조정합니다.
• 기준 화면 설정: 원하는 기준 화면 크기를 설정하여 일관된 디자인을 구현할 수 있습니다.
• 상단 상태바/네비게이션바 고려: 상단 상태바와 네비게이션바 영역을 제외하고 UI 영역을 계산합니다.
• 방향에 따른 자동 조정: 화면 방향 변화에 따라 UI 요소를 자동으로 조정합니다.
• 커스텀 디자인 지원: 디자인 시스템이나 원하는 방식에 맞게 가상 단위를 커스텀으로 정의할 수 있습니다.

4. 실제 개발 적용 예시 

다양한 화면 크기의 기기에 맞춘 텍스트 크기 설정

 

flutter_screenutil 패키지를 사용하면 기준 화면 대비 텍스트 크기를 설정하여 다양한 화면 크기의 기기에 맞게 텍스트를 표시할 수 있습니다.

예를 들어, 다음과 같이 사용합니다.

Text(
  '텍스트 내용',
  style: TextStyle(fontSize: 16.sp), // 기준 화면 대비 16sp 크기
),

 

위 코드는 기준 화면에서 16sp 크기의 텍스트를 표시하며, 실제 기기의 화면 크기와 픽셀 밀도에 따라 적절하게 조정됩니다.

이미지 크기 조정

이미지 크기도 기준 화면 대비 크기를 설정하여 다양한 화면 크기에 맞게 표시할 수 있습니다. 다음과 같은 방법을 사용합니다.

Image.asset(
  'assets/images/example.png',
  width: 100.w, // 기준 화면 대비 가로 100dp
  height: 150.h, // 기준 화면 대비 세로 150dp
),

 

위 코드는 기준 화면에서 가로 100dp, 세로 150dp 크기의 이미지를 표시하며, 실제 기기의 화면 크기와 픽셀 밀도에 따라 적절하게 조정됩니다.

기타 활용

• 여백 및 패딩 설정: padding: 10.w, margin: 20.h 처럼 가상 단위를 사용하여 여백과 패딩을 설정할 수 있습니다.
• 둥근 모서리 설정: borderRadius: Radius.circular(10.w) 처럼 가상 단위를 사용하여 둥근 모서리를 설정할 수 있습니다.
• 그림자 설정: boxShadow: [BoxShadow(offset: Offset(5.w, 10.h), blurRadius: 10.w, spreadRadius: 5.w)] 처럼 가상 단위를 사용하여 그림자를 설정할 수 있습니다.

5. 주의사항 및 추가 정보

• flutter_screenutil 패키지는 기본적으로 위젯 트리의 루트 위젯에 적용됩니다.
  하지만, ScreenUtil.setScreenUtil() 메서드를 사용하여 특정 위젯 트리에만 적용할 수도 있습니다.
• 디자인 시스템이나 원하는 방식에 맞게 가상 단위를 커스텀 정의하려면 ScreenUtil.getSize() 메서드를 활용하여 직접 계산할 수 있습니다.
• flutter_screenutil 패키지 공식 문서
  API 레퍼런스, 설치 방법, 자주묻는 질문 등 다양한 정보가 제공됩니다.

flutter_screenutil 패키지는 Flutter 앱 개발에서 반응형 UI 구현을 위한 필수 도구입니다.

이 블로그 글에서 소개된 내용을 참고하여, 여러분의 앱에도 적극 활용하여 다양한 화면 크기와 해상도에서 일관되고 아름다운 디자인을 구현하시기 바랍니다.

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg