- 原文地址：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 包管理器）類似，但專注於元件
主要區別是：
- 無需向
pubspec.yaml檔案新增任何內容 - 可以預覽元件的效果並檢視原始碼
- 從 Web 中拖放元件
- 共享和瀏覽元件
下載程式
只需解壓縮資料夾並執行 run.bat 檔案即可。
如果它不起作用，請嘗試安裝C ++執行時檔案：(aka.ms/vs/15/relea…)
你能為這個專案做哪些貢獻？
我覺得這會是個大專案，但我需要你們的意見反饋。
在深入研究這個（一些人認為我已經做到了）專案之前，我需要確認大家對這個專案是否真正感興趣。
為此，我製作了當前的演示版，可供下載和播放。但希望大家能記得，這只是一個演示版，它還有一些即將完成修復的 bug。
如果你喜歡這個專案或有什麼意見建議，請通過電子郵件或 Twitter 或者其他方式告知我。我得到的反饋越多越好，這樣我就可以對該專案的未來作出更明智的決定。
PS. 感謝 Simon Lightfoot 在最後階段給予的幫助 :)
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。