Flutter 開発の実践 - 画面表示サイズと物理ピクセル解像度を取得する

開発プロセス中に、画面表示のサイズと物理ピクセル解像度を取得する必要があることがよくありますが、ここでは MediaQuery が使用されますが、MediaQuery は BuildContext のコンテキストに依存して使用する必要があります。

1. MediaQuery は画面表示サイズと物理ピクセル解像度を取得します。

FlutterのMediaQueryは、デバイスの画面情報を取得するために使用されるクラスです。さまざまな画面サイズに適応するために、画面の幅、高さ、ピクセル密度などの情報を取得するために使用できます。

例えば

import 'package:flutter/material.dart';
 
void main() {
    
    
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    Size scrSize = MediaQuery.of(context).size;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '屏幕宽度：${
      
      scrSize.width}',
              ),
              Text(
                '屏幕高度：${
      
      scrSize.height}',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

画面サイズ（論理ピクセル解像度）を取得する

Size scrSize = MediaQuery.of(context).size;
double screenWidth = scrSize.width;
double screenHeight = scrSize.width;

screenWidth と screenHeight を取得しますが、物理ピクセル解像度を取得するには、devicePixelRatio も使用する必要があります。
devicePixelRatio は、論理ピクセルに対する実ピクセルの比率を示し、double 型です。

アクセス方法

 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

物理ピクセル解像度は、画面の幅と高さにデバイスのピクセル比を掛けることで得られます。

Size scrSize = MediaQuery.of(context).size;
    double screenWidth = scrSize.width;
    double screenHeight = scrSize.width;
 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double canvasWidth = screenWidth*devicePixelRatio;
double canvasHeight = screenHeight*devicePixelRatio;

論理ピクセル解像度 (Logical Pixel Resolution) は、
フラッターで使用される抽象的な解像度です。これはデバイスに依存しない論理ピクセルです。これは、プログラムによって制御および使用できる仮想ピクセルを表し、一般的な概念です。論理ピクセル解像度では、実際の弱いピクセル密度に関係なく、画面の幅と高さが論理ピクセルで測定およびテストされます。iPhone7を例にとると、携帯電話の論理解像度は375×667です。
物理ピクセル解像度 (物理ピクセル解像度)
物理ピクセル解像度は、実際の物理デバイスで利用可能なピクセル解像度であり、デバイスの物理ピクセル密度に従って測定されます。デバイスのピクセル、またはデバイスの解像度。iPhone7を例に挙げると、携帯電話の解像度は750*1334です。
デバイスのピクセル比 (デバイスピクセル比)
も同じデバイス上で固定されており、デバイスの物理ピクセルと論理ピクセルの比率を示します。式は次のとおりです。論理ピクセル * DPR = 物理ピクセル。たとえば、iphone7のDPR= 750/375 = 2

2. まとめ

Flutter 開発の実践 - 画面表示サイズと物理ピクセル解像度を取得します。

学習記録、日々改善を続けてください。

Flutter 開発の実践 - 画面表示サイズと物理ピクセル解像度を取得する

1. MediaQuery は画面表示サイズと物理ピクセル解像度を取得します。

2. まとめ

おすすめ