플러터 화면 크기 알아내는 방법

플러터(Flutter)에서 화면 크기를 얻기 위해 MediaQuery라는 클래스를 이용한다.

Mediaquery의 경우 화면 크기 외에도 여러 가지 기기의 시스템 정보들을 담고 있다.

(텍스트 배율, 24시간 포맷 유무, 기기 방향(orientation) 등등)

​

MediaQuery를 이용해 화면 정보를 읽는 방법은 다음과 같다.

MediaQuery.of(context).size             //앱 화면 크기 size  Ex> Size(360.0, 692.0)
MediaQuery.of(context).size.height      //앱 화면 높이 double Ex> 692.0 
MediaQuery.of(context).size.width       //앱 화면 넓이 double Ex> 360.0
MediaQuery.of(context).devicePixelRatio //화면 배율    double Ex> 4.0
MediaQuery.of(context).padding.top      //상단 상태 표시줄 높이 double Ex> 24.0

여기서 context는 앱의 Context 클래스 변수이다.

위의 값들은 실제 픽셀 값이 아닌 논리적 픽셀 값이다. 여기에 화면 배율(devicePixelRatio)을 곱하면 실제 픽셀 값을 알 수 있다.

​

참고로 실제 픽셀 값은 아래의 방식으로도 읽을 수 있다.

import 'dart:ui';

window.physicalSize    //앱 화면 픽셀 크기 size Ex> Size(1440.0, 2768.0)

하지만 여기서 중요한 건 실제 픽셀 값보단 논리적 픽셀 값과 배율이다.

​

위의 코드들을 실제 앱에 실행시켜 찍어보면 다음과 같다.

import 'package:flutter/material.dart';
import 'dart:ui';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Get Screen Size',
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  MainPage({Key key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(      
      child: Column(        
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('displaySize : ${MediaQuery.of(context).size}'),
          Text('displayHeight : ${MediaQuery.of(context).size.height}'),
          Text('displayWidth : ${MediaQuery.of(context).size.width}'),
          Text('devicePixelRatio : ${MediaQuery.of(context).devicePixelRatio}'),
          Text('statusBarHeight : ${MediaQuery.of(context).padding.top}'),
          Text('window.physicalSize : ${window.physicalSize}'),          
          ],
        ),
      ),
    );
  }
}

그리고 실행 결과는 다음과 같다.

갤럭시 S9에서 실행한 화면이고 값을 보면 360.0 X 692.0인 것을 볼 수 있다.

그리고 화면 배율이 4.0인 것도 알 수 있다.

위에서 언급했듯이 논리적 픽셀 값에 화면 배율을 곱하면 실제 픽셀 값을 알 수 있다고 했다.

즉, 360.0 4.0 하면 실제 앱 화면의 넓이 픽셀 값이 나오고 692.0 4.0 하면 실제 앱 화면의 높이 픽셀 값이 나오게 된다.

그리고 위 값에는 앱이 표시되는 영역의 사이즈이다. 위에서 보면 statusBarHeight는 상단 상태 표시줄의 크기를 나타내고 있다. 이것 역시 배율을 곱해야 픽셀 값을 얻을 수 있다.

​

우선 화면 레이아웃을 구성할 땐 위의 "논리적 픽셀 size"를 기준으로 맞추거나 Flex를 이용해 비율로 구성하면 될 것 같다.

또, 이미지의 경우 화면 배율과 관련이 있기 때문에 제대로 된 이미지를 넣으려면 아래와 같이 각 배율에 맞게 여러 벌의 이미지를 추가해 줘야 한다.

assets/images/my_icon.png
assets/images/2.0x/my_icon.png
assets/images/3.0x/my_icon.png
assets/images/4.0x/my_icon.png
만약 장치 배율이 없는 경우 가장 가까운 이미지를 사용한다고 한다.

예를 들어 1.8 배율인 경우 .../2.0x/my_icon.png를 사용하고 2.7 배율인 경우 3.0x를 사용한다고 한다.