[Flutter] 해상도 시스템

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