一个全新 Flutter UI 适配方案，低入侵 & 100% 还原设计稿！

一、序

大家好，这里是承香墨影！

今天介绍一个我最近开源的 Flutter UI 方案，可以做到在全设备上 100% 还原设计稿，其背后的思想类似 Android 侧今日头条基于 density 的 UI 适配方案，接下来进入正题。

由于 Android 的碎片化，全设备的 UI 一致性，一直是开发者和设计师所追求的。后续也衍生出各种不同的适配方案以及对应的开源库，例如：AndroidAutoLayout、smallestWidth，以及最后今日头条基于修改 density 的 UI 适配方案。到后期对于 Android 的 UI 适配，基本上不存在什么新的问题了，只有方案的选择和使用问题。

而在 Flutter 中，由于要支持 Android 和 iOS 多系统的设备，UI 适配遇到的场景将更加复杂，这一切又要重新来一遍。对于各个系统的屏幕适配原理都差不多，Flutter 也是如此，我们在 Flutter 中直接写在 Widget 的尺寸，会被乘以一个倍数去放大，最终对应到的是物理设备屏幕的像素尺寸。

这个倍数，在 Flutter 中就是 devicePixelRatio。它是设备上一个固定的值，不同设备的取值会不相同。

主流的 Flutter UI 适配方案，就是使用 flutter_screenutils 这个 Package，它也是基于 devicePixelRatio 对设置给 Widget 的尺寸进行调整，但入侵还是比较高的，需要遵循它的一些约束，如果想在成熟的项目上迁移使用，改动不会小。并且也有一些小问题，例如：无法适应 const Widget 的优化（戳此了解）。

那么针对我的一些需求，我开源了一个 Flutter package：screen_autosize，对于成熟的项目也可以做到低入侵的引入。

既然是 UI 适配，直接上效果说话。

对于一套相同的代码，使用 1080 宽度的设备，但从左到右的 dpi 分别是 375 → 392 → 440，运行后的效果如下。

引入 screen_autosize 后，运行效果如下。

该有的元素都有，可以看到在不同的参数设备下，可以做到 100% 的一致性。

二、screen_autosize

接下来我们正式介绍 screen_autosize。

2.1 优势 & 劣势

优势：

1. 适配效果：100% 还原 UI；

2. 稳定性高：原理简单，无任何 Framework 的 Hook；

3. 侵入性低：修改点少且统一，日常编写 UI 无需特殊注意；

4. 使用成本低：统一修改，全局有效；

5. 性能损耗：几乎没有；

6. 不破坏 const Widget 常量优化（戳此了解）；

<