Flutter 是 Google 的開源 UI 工具包。利用它,只需一套代碼庫,就能開發出適合移動設備、桌面設備、嵌入式設備以及 web 等多個平臺的精美應用。過去幾年,對於想要打造多平臺應用的開發者來講,Flutter 已成爲他們的首選。但設計師們須要的是一個視覺工具來創建原型和構建 Flutter UI,而不是精雕細琢 Dart 源代碼,因而 XD to Flutter 應運而生!html
此插件的首個預覽版推出已近一年。這期間,咱們一直在經過一些小更新對它進行優化和改進;現在,繼去年夏天 1.0 版的重大發布以後,咱們推出了此插件的 2.0 版以配合 Flutter 2 的發佈。git
顧名思義,XD to Flutter 插件是一個功能強大、易於使用的工具,可將您的 Adobe XD 設計導出爲簡潔、有效的 Flutter 代碼。您能夠從本身的設計中複製特定視覺元素的代碼,導出各類可再利用的 Widgets,甚至能夠將一些視圖整個導出。github
這意味着,利用 XD to Flutter 插件,您只需點擊一個按鈕,便可讓您的設計在任意設備上運行。此插件雖不能爲您完成整個應用的編碼,但可以讓您有個極好的開端。web
XD to Flutter 由 gskinner 與 Adobe 聯合開發,做爲 Adobe XD 自己的插件發佈,所以,您可將它用於您正在打造的任何現有的 Adobe XD 設計。安全
最初發布的 XD to Flutter 版本很是有助於輸出設計中全部不一樣的視覺元素,好比矢量圖形、圖片、富文本、背景模糊效果、混合模式、陰影及其餘相似元素,只惋惜輸出結果是靜態的,且不夠靈活。框架
儘管抓取圖標或文本樣式不費什麼功夫,但咱們仍但願它能發揮更大功效。XD 不只可以讓設計師建立動態 UI,還提供有自適應佈局、可滾動區域、堆棧及網格之類的工具;咱們但願此插件能支持上述每一種功能,而在 2.0 版中,咱們取得了許多進展。工具
響應式調整尺寸佈局
XD to Flutter 支持 XD 的響應式佈局功能,您可將元素 "固定" 在其所屬父元素內,並精確控制其調整尺寸的方式。優化
Adobe XD 中的響應式設計
Flutter 中的響應式設計
Flutter 使用 adobe_xd 開源軟件包中的自定義 Pinned 佈局 Widget 實現了這一功能,開發者可直接在其項目中使用。編碼
Pinned Widget 代碼示例
堆棧和滾動組
"堆棧" 和 "滾動組" 讓開發者能夠運用一些新的方式來在 Adobe XD 中動態佈局屏幕內容。經過 XD 中的 "堆棧",您能夠將一堆形形色色的元素以橫向或縱向列表排列,元素之間能夠有不一樣的間距;相較於與其同名的 Stack
Widget,"堆棧" 更相似於 Flutter 中的 Flex
Widget。
如您所料,利用 "滾動組",可直接在您的設計內定義一個區域來橫向或縱向滾動一大組內容。
XD to Flutter 2.0 版對這些功能都支持,可將它們轉換成常見的 Flutter Widget (Column
、Row
以及 SingleChildScrollView
)。您甚至能夠將某個堆棧放入一個滾動組內,從而輕鬆建立一個滾動項列表。
XD (左) 和 Flutter (右) 中的堆棧和滾動組
內邊距和背景元素
另外一項新功能是背景元素,也就是說,您能夠指定一個視覺元素做爲另外一組元素的背景。背景元素能夠和內邊距配對使用,以界定背景的邊緣與其內容之間的距離。
Flutter 導出工具使用 Stack
Widget 將背景元素分層放置在內容以後,然後者則放置在一個 Padding
Widget 內。
XD (左) 和 Flutter 中的內邊距和背景
Flutter 2 和空安全機制
正是有了上述佈局功能,才能成就響應式更強的 UI,也加強了 Flutter 2 對桌面設備和 web 等平臺的支持。
Flutter 2 還引入了健全的空安全機制 ,這一語言特性可幫助開發者先行捕捉不可爲空的變量卻爲空的問題,避免其在應用中引起問題。XD to Flutter 2.0 版包含一個新設置 "Export Null Safe Code" (導出空安全代碼);導出時選中該設置,可確保生成的代碼將來可用。
"Export Null Safe Code" 設置和輸出
聽起來不錯啊!怎樣開始使用?
不管您是要使用它來複制某個構思精妙的漸變效果的代碼,仍是要導出徹底響應式、參數化、交互式的 Widget,都很是簡單,不過是加入到成千上萬已經在使用 XD to Flutter 插件的創意專業人才大軍而已。
您只需從 Adobe XD 的 "Plugin" (插件) 菜單選擇 "Browse Plugins…" (瀏覽插件),而後搜索 "Flutter" (奇怪的是,搜索 "XD to Flutter" 不起做用),或前往 adobe.com/go/xd_to_flutter,便可安裝此插件。
安裝好後,從插件面板中打開 XD to Flutter 面板,點按 "Need help" (須要幫助?) 連接,可查閱 plugin documentation (插件幫助文檔)。
咱們一直專一於打造可在任何平臺上實際運行的精美應用,Flutter 2 就是咱們在這一框架上邁出的可喜一步。gskinner 的各團隊很是開心可以與 Adobe 和 Google 合做,共同確保 XD to Flutter 進一步簡化將設計轉換成可運行產品的過程。