<Flutter> 스마트폰 화면에 맞춰 UI 만들기

스마트폰은 기기마다 화면 해상도 및 화면 비율이 다르기 때문에 Flutter에서 UI를 개발할 때 기기별로 화면 크기를 맞추는 것이 중요합니다.

 

이 글에서는 기본적인 MediaQuery와 flutter_screenutil 패키지를 사용하여 플러터에서 기기별 화면 크기를 조절하는 방법에 대해 알아보고자 합니다.

1. MediaQuery를 사용한 방법

MediaQuery는 Flutter에서 화면 크기 정보를 제공하는 메커니즘입니다.

MediaQuery 를 활용해서 기기의 화면 크기에 맞춰 애플리케이션을 개발할 수 있습니다.

사용 예시

먼저 MediaQuery를 사용하여 기기 크기를 가져오기:

보통 main.dart 에서 실행시키면 됩니다.

// 화면 크기 가져오기
Size screenSize = MediaQuery.of(context).size;
double screenWidth = screenSize.width;
double screenHeight = screenSize.height;

화면의 너비와 높이를 가져온 후 필요한 위젯에 해당 값을 적용할 수 있습니다.

Container(
  // 화면의 50% 너비 사용
  width: screenWidth * 0.5, 
  // 화면의 30% 높이 사용
  height: screenHeight * 0.3, 
  child: /* 위젯 구현 */,
)

이렇게 하면 기기마다 다른 화면 크기에도 UI가 적절히 맞춰집니다.

2. flutter_screenutil 패키지 사용하기

flutter_screenutil 패키지를 사용하면 더 간단하게 기기별 화면 크기 조절이 가능합니다.

패키지를 추가한 후, 사용법과 결과에 대해서 설명하겠습니다.

 

pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter_screenutil: ^5.8.4

그런 다음 패키지를 import한 다음 초기화합니다.

import 'package:flutter_screenutil/flutter_screenutil.dart';

@override
Widget build(BuildContext context) {
  // 화면 크기 초기화
  ScreenUtil.init(context, width: 360, height: 690, allowFontScaling: true); 
  // ... 나머지 코드
}

이제 화면 크기를 계산하고 UI에 적용할 수 있습니다.

Container(
  // 화면의 50% 너비 사용
  width: 0.5.sw,
  // 화면의 30% 높이 사용
  height: 0.3.sh,
  child: /* 위젯 구현 */,
)

또한, 폰트 크기 조절도 가능합니다.

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 14.sp), // 폰트 크기 설정
)

이렇게 하면 MediaQuery를 사용한 방법보다 더 간결하게 기기별로 화면 크기를 조절할 수 있습니다.

 

저도 처음에는 1번 방법인 MediaQuery를 활용해서 많이 했는데,

기기별로 적용하기 어려운 부분들도 많았습니다.

 

flutter_screenutil을 활용하면 조금 더 편하게 작업할 수 있었습니다.