[譯] 介紹一款 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。