前言，最近一直闭关进入Flutter实战开发，遇见了最大的问题就是屏幕适配

其他某机型设备：

Screenshot_2019-04-30-12-10-55-607_M.X.png

作者本人设备：

Screenshot_2019-04-30-12-10-56-294_M.X.png

首先推荐用ScreenUtil这个dart包，不过我用的时候感觉老遇见问题，
setwidth跟setheight的区别我也没搞清楚，字体的大小也遇到了问题
还有几个关于屏幕适配的帖子感觉都不是很适用
然后就是用MediaQuery.of(context).size（dp）拿到屏幕的宽高然后按比例除以一个值

首先须知

dp是虚拟像素，在不同的像素密度（dpi）上会自动适配，是一种基于屏幕密度的抽象单位，在每英寸160点的显示器上，1dp=1px。
比如在像素密度是160的设备上，1dp=1px（像素）
在240dpi上，1dp=1.5px，
而在作者分辨率2280×1080（px） 440dpi的设备上，1dp=2.75px，
Flutter中window.devicePixelRatio就是后面的值，也就是你的dpi跟160的比值
通过简单的计算我的屏幕高就是2280/2.75=829.090909dp，宽就是1080/2.75=392.727273，
于是乎

Align(
        alignment: Alignment.centerLeft,
        child: Container(
          height: 40,
          width: 1080/2.75/2,
          color: Colors.red,
        ),
      )，

效果

Screenshot_2019-04-30-12-40-16-061_windows.x.m.fl.png

红条就是宽度的一半
代码不动拿到480dpi的设备上就是

Screenshot_2019-04-30-12-44-28-030_windows.x.m.flutter_appasdsadasd.png

可想而知红色的不会占宽度一半，因为440dpi跟480dpi没差太多，所以还不是很严重，还是能看出变长了

然而平时一般又是直接把dp拿来用，更改马上看效果，不会每次就就去算它跟屏幕宽度的比例，于是作者每次写宽高都（以前自己写的dp）*2.75/window.devicePixelRatio；

Align(
        alignment: Alignment.centerLeft,
        child: Container(
          height: 40,
          width: (1080/2.75/2)*2.75/window.devicePixelRatio,
          color: Colors.red,
        ),
      )，

乘以2.75（即当前设备的window.devicePixelRatio）转换为了px像素，再除以适配设备的window.devicePixelRatio，这样不管在任何设备，都会按屏幕比例显示大小，字体大小我也是这样干的，不知道会不会有其他异常
最后看下对比效果
作者本人设备：

Screenshot_2019-04-30-12-58-26-209_M.X.png

其他高密度，低分辨率机型（未适配）：

Screenshot_2019-04-30-12-59-36-006_M.X.png

成比例的变大了字体跟所有Widget的宽高

其他高密度，低分辨率机型（适配后的）：

Screenshot_2019-04-30-12-58-23-864_M.X.png

可能看图片不明显但作者是用真机调试仔细对比过的，反正感觉上比例就跟自己设备差不多，啊哈哈🤣，原理上也感觉行得通，具体实不实用还得看自己用的情况

还有其他有些东西都准备分享给有同样问题的人，慢慢的会写出来，闭关太久了，

最后本人Flutter实战软件的链接
MX工具箱，暂时还不开源，