플러터에서 flutter_screenutil 패키지 사용하기[ 위젯 리사이즈와 폰트사이즈 자동 맞춤 ]

플러터 애플리케이션에서 다양한 디바이스 해상도에 대응하기 위해 flutter_screenutil 패키지를 사용할 수 있습니다. 이 패키지는 간단하게 해상도에 따라 크기를 조정하고, 반응형 디자인을 구현하는 데 유용합니다. 이 블로그에서는 flutter_screenutil 패키지의 기본적인 사용법과 주요 기능을 소개합니다.

1. 패키지 추가하기

먼저, flutter_screenutil 패키지를 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: ^5.1.1

pubspec.yaml 파일에 패키지를 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

2. 사용법

2.1. 패키지 가져오기

import 'package:flutter_screenutil/flutter_screenutil.dart';

2.2. 초기화

애플리케이션의 시작 부분에서 flutter_screenutil을 초기화해야 합니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690), // 디자인 시안의 해상도 (width, height)
      builder: () => MaterialApp(
        title: 'Flutter ScreenUtil Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

designSize는 애플리케이션을 디자인할 때 사용한 해상도입니다.

보통 디자이너가 제공한 기준 해상도를 여기에 설정합니다.

2.3. 크기 조정

이제 flutter_screenutil을 사용하여 위젯의 크기를 조정할 수 있습니다.

Container(
  width: 200.w, // 폭을 디바이스 해상도에 맞게 조정
  height: 100.h, // 높이를 디바이스 해상도에 맞게 조정
  margin: EdgeInsets.only(top: 20.h),
  padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.r), // 반지름을 디바이스 해상도에 맞게 조정
  ),
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: 16.sp), // 글꼴 크기를 디바이스 해상도에 맞게 조정
  ),
),

위의 예제에서 .w, .h, .r, .sp 등의 단위를 사용하여 각 속성을 디바이스 해상도에 맞게 설정할 수 있습니다. 이는 width, height, radius, font size 등 다양한 속성에 적용됩니다.

3. 주요 기능

3.1. 해상도 독립적인 크기 조정

flutter_screenutil을 사용하면 디바이스 해상도에 상관없이 일관된 UI 크기를 유지할 수 있습니다. 이는 다양한 디바이스에서 UI가 일관되게 보이도록 도와줍니다.

3.2. 반응형 디자인 구현

애플리케이션의 크기가 변경될 때 UI 요소들이 자동으로 조정되어 반응형 디자인을 구현할 수 있습니다.

이는 여러 디바이스에서 사용자 경험을 향상시키는 데 도움을 줍니다.

4. 결론

이 블로그에서는 flutter_screenutil 패키지를 사용하여 플러터 애플리케이션에서 디바이스 해상도에 맞춰 UI를 관리하는 방법을 소개했습니다.

이 패키지를 사용하면 애플리케이션의 일관된 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

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

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