如何获取Flutter屏幕的最大X坐标与最大Y坐标？

问题背景 #

我尝试通过屏幕宽高绘制从左上角到右下角的对角线，预期效果是这条线贯穿整个屏幕：

使用的代码如下：

Path drawPath(){
    double width = window.physicalSize.width;
    double height = window.physicalSize.height;
    Path path = Path();
    path.moveTo(0,0);
    path.lineTo(width, height);
    return path;
}

但实际输出的线只延伸到屏幕中心位置：

临时将宽高除以2能得到近似预期的效果，但这并非正确解法，请问该如何正确获取Flutter屏幕的最大X坐标与最大Y坐标？

临时近似代码：

Path drawPath(){
    double width = window.physicalSize.width;
    double height = window.physicalSize.height;
    Path path = Path();
    path.moveTo(0,0);
    path.lineTo(width/2, height/2); // 需要除以2才能近似预期
    return path;
}

问题原因与解决方案 #

核心问题 #

window.physicalSize获取的是设备的物理像素尺寸，但Flutter绘图API使用的是逻辑像素坐标系统，两者存在倍数差异（由设备的像素密度比devicePixelRatio决定）。直接使用物理像素值绘图，坐标会被放大，导致线条只到屏幕中心。

正确实现方式 #

方式1：通过window转换逻辑像素

import 'dart:ui';

Path drawPath(){
    // 把物理像素转换为逻辑像素
    Size logicalSize = window.physicalSize / window.devicePixelRatio;
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(logicalSize.width, logicalSize.height);
    return path;
}

方式2：使用MediaQuery（推荐）

MediaQuery能自动适配上下文布局，更符合Flutter的布局规范：

import 'package:flutter/material.dart';

Path drawPath(BuildContext context){
    Size screenSize = MediaQuery.of(context).size;
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(screenSize.width, screenSize.height);
    return path;
}

额外说明 #

• 如果需要获取可用屏幕区域（排除状态栏、导航栏等），可以结合MediaQuery.of(context).padding计算：

  Size usableSize = Size(
    MediaQuery.of(context).size.width,
    MediaQuery.of(context).size.height - 
    MediaQuery.of(context).padding.top - 
    MediaQuery.of(context).padding.bottom
  );
  

内容的提问来源于stack exchange，提问作者tailor