一个Flutter widget自动适配不同UI到Web、Android

上图

不是dp适配

对的，不是对dp的适配，而是在不同的分变率，改变布局的方式。大的屏幕肯定是要合理利用空间，这样布局紧凑，不浪费空间，小的屏幕又不能让大的组件等比压缩，这样不光会变丑，还会变的更难触及，既然Flutter对web的支持，那么肯定要支持不同分辨率，适配不同布局吧，就像我们Android开发，在针对Pad的时候做一个单独的xml布局来适配一样。

实现原理

原理很简单，就是在屏幕宽度到了一定范围内，然后动态返回不同的Widget，那么拿到屏幕的宽度就是关键，其实很简单

MediaQuery.of(context).size.width

详细介绍参见官方文档