借Adobe XD之力，自動生成Flutter代碼

概述

今天，咱們來聊聊一個專門爲「懶人程序員」準備的工具——Adobe XD。使用它能夠快速將原型設計圖轉換爲可執行的Flutter代碼， 而因爲Flutter自身跨平臺的特性，所以這些自動生成的代碼便可以用在Android、iOS這樣的移動設備上，也能夠用在Web頁中。

認識Adobe XD

首先咱們來看看Adobe XD是什麼，如下內容摘自百度百科：

Adobe XD是一站式UX/UI設計平臺，在這款產品上面用戶能夠進行移動應用和網頁設計與原型製做。同時它也是一款結合設計與創建原型功能，並同時提供工業級性能的跨平臺設計產品。設計師使用Adobe XD能夠高效準確的完成靜態編譯或者框架圖到交互原型的轉變。

簡而言之，這個軟件實際上就是一個原型圖設計工具。而又因爲其背靠Adobe這座大山，所以它還能夠與PhotoShop、Sketch、Illustrator……等工具兼容使用，很是方便。再加上今天咱們介紹的重磅功能——自動生成源代碼，這或許就是其在Axure、Sketch等軟件普遍使用的今天依然可以存活的緣由之一。此外，它自己仍是免費的，只要登陸Adobe Creative Cloud帳戶便可免費安裝並使用它。
Adobe XD軟件自己能夠運行在MacOS以及Windows平臺上，順便說一句：本篇文章的內容我也以避免費視頻課的形式發佈在B站上，喜歡看視頻的小夥伴不妨點擊連接跳轉到B站。
下面咱們來看看Adobe XD的系統配置要求（摘自Adobe XD官方網站）：

Adobe XD還支持在移動設備上運行，其配置要求再也不詳述，感興趣的朋友能夠到其 官方網站上了解詳情。

安裝Adobe XD，配置Flutter開發環境

這兩個步驟的詳細過程，不是本文討論的重點，這裏再也不贅述。咱們的目標是這兩個要在電腦中正常運做，其判斷依據以下：

運行正常的Adobe XD：

在開始菜單中點擊Adobe XD，首次運行可能會出現登陸界面。按照提示登陸，成功後出現以下圖所示的界面，即表示其運行正常：

接着，使用XDPacks安裝和管理插件。下載地址： xd.94xy.com/xdpacks.htm…。 安裝後啓動XDPacks，按照提示登陸，安裝XD to Flutter插件。

配置正確的Flutter開發環境：

啓動命令行，輸入
flutter doctor
出現以下圖相似的結果，即表示配置準確無誤。

注意，雖然咱們這裏有感嘆號的警告信息，也有紅叉，但仔細看事後能夠得知，這些都是可有可無的。

開始繪製原型

下面咱們就能夠開始用XD繪製原型圖了，筆者這裏畫一些極其簡單且沒有實際意義的圖形，目的僅做演示之用：

建立Flutter項目，自動生成UI源碼

下面咱們建立一個新的Flutter工程，命令爲：

flutter create xxxx
複製代碼

其中，「xxxx」爲項目名，在本例中爲xd_to_flutter，所以，完整的命令爲：

flutter create xd_to_flutter
複製代碼

稍等片刻，便可出現建立成功的結果。
使用Android Studio或VS Code打開項目中的pubspec.xml，添加adobe_xd插件。

dependencies:
	adobe_xd: ^0.1.4
複製代碼

下面，打開剛纔使用過的XD軟件，配置項目路徑，並輸出代碼。

如上圖所示，分別配置項目目錄、組件命名前綴以及輸出內容。最後，點擊最下方的"Export All Widgets"，便可生成源碼。

使用生成的源碼運行App

回到Android Studio或VS Code，能夠看到已經生成的dart源碼文件，咱們在main()方法中使用它。

啓動模擬器或鏈接真機，運行後的效果以下圖所示：

能夠看到，運行結果與原型設計圖保持高度一致。