關於 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 工程師的生產力，能在一定程度上成為設計師和程式設計師之間的“橋樑”，雖然它並不完美，但是值得一試。