Spuernova 是如何提高 Flutter 的生產力

關於 Spuernova 我曾在 《Flutter Interact 的 Flutter 1.12 大進化和回顧》 中介紹過：在 2019 年底的 Flutter Interact 大會上，Spuernova 發佈了對 Flutter 的支持，經過導入設計師的 Sketch 文件從而生成 Flutter 代碼，這無疑提高了 Flutter 的生產力和可想象空間。

自動生成代碼的方式並不罕見，可能很多有過相似經驗的開發者會表示「不屑一顧」，也可能會有節奏黨再一次拉起「開發藥丸」的大旗，固然此次要分享的不會是這些，此次想要分享的是： Spuernova 能夠成爲開發者和設計師之間另類的溝通橋樑。

通常狀況下設計師和程序員之間是存在某種程度的「生殖隔離」，設計師產出的效果在開發手上很容易「難產」，那麼如何給設計師解釋「爲何作不了」和「須要怎麼作」就是一件很費勁的事情，甚相當乎到「信任問題」。

Spuernova 對 Flutter 的支持，可讓設計師很直觀地知道 Flutter 能作到什麼程度，從而讓設計師可以更好地規範 UI 效果，提供溝通的友好度。

舉個例子，以下圖所示，在設計過程當中 陰影、模糊 和 漸變 是常見的效果，而這些效果在 Sketch 上也能夠很容易地被實現。

可是這些效果在 Flutter 中可以被完美還原嗎？

以下圖所示，這時候設計師只須要將 Sketch 文件導入到 Spuernova 中，就能夠直觀地看到設計稿在 Flutter 中的默認渲染效果。

從上圖能夠看到，Sketch 中的陰影效果被完美還原，可是模糊和漸變效果卻發生了一些變化，說明了這個效果在 Flutter 上「並不支持」 。

這時候並非說 Flutter 就徹底沒辦法還原出設計稿的效果，只是說默認狀況下官方並無支持，因此實現這種效果須要必定成本。

首先以下圖所示，在選擇陰影框的時候，能夠看到在設計稿中的陰影在 Flutter 可使用 boxShadow 實現，而 boxShadow 對應的實現代碼被放在 shadows.dart 文件中。

接着查看 shadows.dart 文件，能夠看到對應的 primaryShadow 實現代碼，這時候開發就能夠直接 cv 樣式代碼，不須要對着設計稿一遍一遍的調整參數，而且在 Supernova 的右側還有對應給設計師調整參數的工具欄，從而提供了設計和開發之間另類的「溝通語言」。

接着看模糊陰影實現，該效果在 Flutter 代碼上直接消失了，其實高斯模糊的效果在 Flutter 上是能夠實現，這裏不過是單純由於「純色」效果而致使沒法被正常「識別」。

接着看漸變效果，漸變效果在 Flutter 上是用 Gradient 實現的，只是設計稿中的漸變效果在 Flutter 上被識別爲 LinerGradient ，呈現效果出現了誤差。

這裏應該被識別爲 RadialGradient 更爲貼切，只是想要完成實現設計稿的效果仍是有些難度。

從上述例子能夠看到 Spuernova 並不完美，甚至在列表、點擊、動畫等常見效果上還須要作額外的配置，可是對於我而言 Spuernova 是和設計師溝通的平臺，它用更直觀的方法告訴了設計師「能作什麼」，而且快速讓我知道「須要作什麼」。

另外還有一個驚喜就是：Spuernova 還支持 Sketch 「轉譯」 爲 Android 、iOS 和 react-native 代碼，可是另外一個驚喜就是除了 Flutter 以外其餘須要收費。

總的來講 Spuernova 確確實實提高了 Flutter 工程師的生產力，能在必定程度上成爲設計師和程序員之間的「橋樑」，雖然它並不完美，可是值得一試。