Flutter中如何将像素转换为Widget尺寸？

Web端的px和Flutter中的宽度单位逻辑不同，分两种场景处理：

1. Web端px是设计稿原始物理像素 #

如果你的100px是UI设计稿里标注的原始物理像素，需要结合设备像素比（devicePixelRatio）转换为Flutter的逻辑像素：

// 获取当前设备的像素比
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
// 将Web物理像素转为Flutter逻辑像素
double flutterWidth = 100 / devicePixelRatio;

SizedBox(width: flutterWidth);

2. Web端px是适配后的CSS像素 #

如果是Web页面中已经做过适配的CSS px，它和Flutter的逻辑像素（dp）是等价的——两者都是为了在不同分辨率设备上保持一致的视觉大小，直接使用数值即可：

SizedBox(width: 100);

注：Flutter中直接编写的数值默认是逻辑像素，会自动根据设备分辨率缩放，保证跨设备视觉统一。

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