Flutter社區

Flutter 是 Google 的開源 UI 工具包。利用它，只需一套代碼庫，就能開發出適合移動設備、桌面設備、嵌入式設備以及 web 等多個平臺的精美應用。過去幾年，對于想要打造多平臺應用的開發者來說，Flutter 已成為他們的首選。但設計師們需要的是一個視覺工具來建立原型和構建 Flutter UI，而不是精雕細琢 Dart 源代碼，于是 XD to Flutter 應運而生！

此插件的首個預覽版推出已近一年。這期間，我們一直在通過一些小更新對它進行優化和改進；如今，繼去年夏天 1.0 版的重大發布之后，我們推出了此插件的 2.0 版以配合 Flutter 2 的發布。

等等，什么是 XD to Flutter？

顧名思義，XD to Flutter 插件是一個功能強大、易于使用的工具，可將您的 Adobe XD 設計導出為簡潔、有效的 Flutter 代碼。您可以從自己的設計中復制特定視覺元素的代碼，導出各種可再利用的 Widgets，甚至可以將一些視圖整個導出。

這意味著，利用 XD to Flutter 插件，您只需點擊一個按鈕，即可讓您的設計在任意設備上運行。此插件雖不能為您完成整個應用的編碼，但可讓您有個極好的開端。

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 進一步簡化將設計轉換成可運行產品的過程。