티스토리 뷰

Mobile/Flutter

[Flutter] 해상도 시스템

풍요로운 해구름 2021. 1. 21. 15:19

Android에서는 dp(Density-independent Pixel) 단위를 썼다면, Flutter에서는 Logical Pixel 단위를 사용합니다. 단위만 다를 뿐 실제로 안드로이드의 dp 단위와 동일합니다.

이미지의 경우에는 res/drawable-* 형태의 폴더명으로 이미지를 분류했다면, Flutter에서는 iOS와 동일하게 2.0x, 3.0x와 같은 폴더명을 사용하여 이미지를 분류합니다.

Density dots per inch dots per cm Flutter Image Folder
ldpi 120 47.2 0.75x
mdpi 160 62.9 1.0x
hdpi 240 94.5 1.5x
xhdpi 320 125.9 2.0x
xxhdpi 480 188.9 3.0x
xxxhdpi 640 251.9 4.0x

장치의 해상도를 얻는법

MediaQuery를 통해서 해상도에 관한 정보를 손쉽게 얻을 수 있습니다.

Column(
    children: <Widget>[
        Text('displaySize : ${MediaQuery.of(context).size}'), //너비, 높이 (392.7, 759.3)
        Text('devicePixelRatio : ${MediaQuery.of(context).devicePixelRatio}'), //픽셀밀도 (2.75)
        Text('statusBarHeight : ${MediaQuery.of(context).padding.top}'), //상태바 높이 (24.0)
    ],
),

iOS 스크린정보

스마트폰 배율 Logical Pixel 비율 크기
iPhone 3GS 이하 1.0x 320x480 3:2 3.5
iPhone 4 2.0x 320x480 16:9 3.5
iPhone 5 2.0x 320x568 16:9 4
iPhone 6/7/8 3.0x 375x667 16:9 4.7
iPhone 6/7/8 Plus 3.0x 414x736 16:9 5.5
iPhone X 3.0x 375x812 19.5:9 5.8
iPhone Xs Max 3.0x 414x896 19.5:9 6.5

 

댓글
댓글쓰기 폼