[译] 介绍一款 Flutter 的 Widget 生成器：用 Flutter 编写的应用构建工具

• 原文地址：Introducing: Flutter Widget-Maker, a Flutter App-Builder written in Flutter
• 原文做者：Norbert
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：jerryOnlyZRJ
• 校对者：Mirosalva

不仅是一个布局生成器

这是一款 Flutter Widget-Maker。虽然第一眼看上去它和其余布局生成器没什么差别，可是它具备更多功能。

能够进入我制做的应用首页查看详情：https://norbert515.github.io/widget_maker/website/

---

主要功能

下面我将介绍的就是这款软件的主要功能

请先记住一点，大部分功能还没彻底实现。

代码与视图的无缝衔接

不须要任何的复制粘贴，你只须要拖放咱们的滑块就能够自动修改代码。

能够作到微小幅度的调整。

响应式编辑

拖放组件的同时也会自动编辑它的属性代码。

编辑中的应用能够处在运行状态。

可以轻松地修改一些复杂属性

可以垂手可得地修改 BoxDecorations、CustomPaints 还有 CustomMultiChildLayouts 这些复杂属性。

---

项目的核心概念

对传统的编码形式作出提高而不是取代

区别于其余一些尽量隐藏实际的 HTML 和 CSS 代码的 HTML 编辑器（我以为缘由多是有些人以为 CSS 是很可怕的），这款编辑器释放了底层代码的强大功能。

它不是将代码隐藏在图形化界面下，而是生成清晰、易读和可靠代码的同时，还能够经过图形化界面实现组件可视化和可编辑的特性。

没有平台限制

这款 Widget-Maker 软件可以在全部的桌面平台上运行。不只如此，得益于 Hummingbird 项目，它能直接在网页上运行。

除了可以在移动设备上运行编辑器以外，我还会考虑让用户可以在手机上编译本身的应用程序。我作了一些研究，我很肯定个人想法是可行的。

应用程序在平板电脑上运行

不须要任何花里胡哨的配置

当 widget 生成器打开一个包含 widget 的 dart 文件时，widget 生成器会自动捕获分析 widget 并展现视图编辑器界面。。

适用于每一个人

不管你是 Flutter 的新手，或者自从 alpha 版本就开始进行 Flutter 编码，都不要紧，Widget-Maker 将为每一个人带来价值。

---

快速的反馈回路

在我看来，快速的反馈回路可以为你带来最大的生产力提高。虽然 Flutter 的热重载作的很好，可是有些地方还能够作些优化。

我想谈谈一个例子：开发响应式布局。

你会作的就是编写代码并检查它在小型设备上的呈现，而后再在平板电脑上观察其呈现。

你也可能有幸拥有支持调整大小的设备模拟器、嵌入器，与同时打开多个物理设备、模拟器相比，这已是一个巨大的进步。可是你仍然须要更改代码，而后将窗口调整为一堆不一样的大小并不断重复这一操做。

但 Widget-Maker 的工做流程可能以下所示：

在一个图形化界面中打开不一样大小的 Flutter 应用程序，在滑动滑块时实时更新，例如，控制其中一个 Expanded 的 flex 值。

---

将来可能作的一些尝试

我不想把如今的全部想法都拿来讨论，只是由于我首先要在扩展以前让它变得健壮（我有太多的想法），但这里有一些个人想法，并且有一天颇有可能会让它成为现实：

经过 keyframes 实现动画

工做流程：

选择一个属性并设置 keyframe，按下按钮或者触发其余操做，选择相同的属性并添加另外一个 keyframe。

动画的代码马上就能生成并能使用。

即时编写测试

组件测试：自动生成组件的预期结果图像（待比较的组件图像）和经常使用的 assertions 方法（实际设置的颜色等等）。

集成测试：点击你的应用程序并设置 assert（就像安卓的 Robolectric），而后生成（可以在无头浏览器中运行的）组件测试用例和在实际设备上的测试用例。

共享和下载组件

与 pub（Dart 包管理器）相似，但专一于组件

主要区别是：

1. 无需向 pubspec.yaml 文件添加任何内容
2. 能够预览组件的效果并查看源代码
3. 从 Web 中拖放组件
4. 共享和浏览组件

下载程序

传送门：github.com/Norbert515/…

只需解压缩文件夹并运行 run.bat 文件便可。

若是它不起做用，请尝试安装C ++运行时文件：(aka.ms/vs/15/relea…)

---

你能为这个项目作哪些贡献？

我以为这会是个大项目，但我须要大家的意见反馈。

在深刻研究这个（一些人认为我已经作到了）项目以前，我须要确认你们对这个项目是否真正感兴趣。

为此，我制做了当前的演示版，可供下载和播放。但但愿你们能记得，这只是一个演示版，它还有一些即将完成修复的 bug。

若是你喜欢这个项目或有什么意见建议，请经过电子邮件或 Twitter 或者其余方式告知我。我获得的反馈越多越好，这样我就能够对该项目的将来做出更明智的决定。

PS. 感谢 Simon Lightfoot 在最后阶段给予的帮助 :)

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。