EasyDSL：简化 Flutter 开发，类 TailwindCSS 的方案

背景

最近在写 Flutter ，感觉一个 padding 都要写一堆，比之前写 web 是要繁琐一点。虽然也有看到一些方案，比如包一层通过属性来设置各种样式。但是好像没有看到类似 TailwindCSS 那样，直接一个 className 字符串就可以写一堆的方案。（如果已经有了话，也可以评论告知一下）

技术方案

一开始想做这个的时候，脑子里只有通过代码生成的方式，后来想想也可以通过运行时的方式。运行时方案暂时没实现，后续可以两种方式都实现，或者 dev 的时候用运行时方式，prod 的时候用代码生成的方式，说到这个脑子里就想到了 vite:)。下面就只说说代码生成的方式。

一个很容易想到的方案就是，对外暴露一个 Div widget ，然后一个 className 属性，build 的时候通过一个 map 去实现，className 到对应 widget 的映射。

基于这个简单的原理，就可以去琢磨 dart 的代码生成了。搞懂 dart 的 build, build_runner, analyzer 之类的包之后，就敲定方案为：先遍历所有 dart 代码找到所有的 className 字符串，然后通过一个注解锚定一个生成文件的位置，然后进行代码生成。

项目进展

仓库地址： https://github.com/zzzgydi/easy_dsl

目前已经发了俩 dart 包：easy_dsl 和 easy_dsl_gen 。

之所以叫 DSL 而不是 Tailwind 之类的，是感觉后续还可以有更多的 DSL 设计来辅助开发。

当前支持的一些 className 大概有：

• flex items-center justify-center 还有特定的 row col stack
• w-10 h-10 max-w-[100] min-h-[100] p-10, m-10
• bg-red-100 bg-[#000000] bg-black/10
• border rounded-md border-red-100
• aspect-video opacity-10
• 还有自己常用的 SafeArea 相关的 safe-t safe

未来还会逐渐添加更多。

遇到一些问题

首先是热更新的问题，.g.dart文件的变化似乎不会再次引起 hot reload ，所以用户得 ctrl+s 保存两次，样式变更才能展示出来。这个问题目前没想好咋搞。

另外一个是，变更 className 之后就会导致 map 里找不到对应的 widget ，进而导致首次热更新的时候 widget 会闪烁（样式变化嘛）。然后得第二次热更新时候样式才能生效，两次时间差的体感还是很明显的。为了解决这个闪烁的问题，简单的处理是在开发时，用编辑距离去判断两个 className 是否可能匹配，这样虽然不能 fix 两次保存才生效的问题，但是可以部分 fix 大幅度闪烁的问题（不是完全 fix ）。

最后

我刚玩 Flutter 不久，希望写 Flutter 的同行路过可以给点意见和建议。感兴趣的可以给仓库点个 star ，来点 issue 反馈和 pr 就更好了。