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