Andrew's Garage

Js처럼.. 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

위의 값들은 실제 픽셀 값이 아닌 논리적 픽셀 값이다. 여기에 화면 배율(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}'),          
          ],
        ),
      ),
    );
  }
}

화면 레이아웃을 구성할 땐 위의 “논리적 픽셀 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를 3.7은 4를 사용한다.