О Spuernove я уже упоминал в статье «[Большие изменения Flutter 1.12 и его история]»(https://juejin.im/post/5df2366b6fb9a016510da009): во время конференции Flutter Interact в конце 2019 года компания Spuernova представила поддержку Flutter, путём импорта файлов дизайнерских Sketch и генерации Flutter-кода, что значительно повысило продуктивность и возможности Flutter.

Автоматическое создание кода — это нечто обычное, и многие опытные разработчики могут сказать, что это "ничего особенного", а некоторые скептики снова начнут говорить о том, что "разработка бесполезна". Однако сегодняшняя статья будет о другом: Spuernova может стать альтернативным мостом между разработчиками и дизайнерами.

Обычно существует некоторый уровень "биологического изоляционизма" между дизайнерами и программистами: эффекты, созданные дизайнерами, часто становятся "недостижимыми" в руках разработчиков. Поэтому объяснение "почему это невозможно" и "как это сделать" становится сложной задачей, которая затрагивает вопросы доверия.

Поддержка Spuernova для Flutter позволяет дизайнерам более наглядно понять, до какого уровня можно достичь с помощью Flutter, тем самым помогая дизайнерам лучше регулировать внешний вид UI и повышая качество коммуникации.Например, на следующем рисунке показаны такие эффекты, как тень, размытие и градиент, которые являются распространенными в дизайне, и эти эффекты легко реализуются в Sketch.

Однако могут ли все эти эффекты быть точно воспроизведены в Flutter?

На следующем рисунке показано, что при импорте файла Sketch в Spuernova дизайнер может сразу увидеть, как выглядит дизайн по умолчанию в Flutter.

Как видно из этого рисунка, эффект тени из Sketch был полностью воспроизведен, но эффекты размытия и градиента претерпели изменения, что указывает на то, что эти эффекты не поддерживаются в Flutter.

Это не означает, что Flutter вообще не способен воспроизводить дизайн, просто официально они не поддерживаются, поэтому реализация таких эффектов требует дополнительных усилий.

Сначала рассмотрим следующий рисунок, где при выборе области тени можно заметить, что тень из дизайна может быть реализована в Flutter с помощью свойства boxShadow, которое находится в файле shadows.dart.

Далее откройте файл shadows.dart, где представлен код реализации primaryShadow. На этом этапе разработчики могут просто скопировать стили кода, не требуя повторной настройки параметров в соответствии с макетами дизайнеров, а также справа от Supernova есть панель инструментов для настройки параметров дизайнерами, что обеспечивает альтернативный "язык общения" между дизайнерами и разработчиками.

Затем рассмотрите реализацию размытой тени. Эффект размытия в Flutter коде может быть реализован, но здесь он просто не распознан из-за эффекта "чистого цвета".

Далее рассмотрите градиентный эффект. Градиентный эффект в Flutter реализуется с помощью Gradient, однако градиентный эффект в макете дизайнеров был распознан как LinearGradient, что привело к различиям в результате.

Здесь более подходящим было бы распознание как RadialGradient, хотя полное выполнение дизайна всё ещё представляет некоторые трудности.

Из вышеупомянутых примеров можно заключить, что Supernova не идеальна, даже для таких распространённых эффектов, как списки, нажатие и анимация, требуются дополнительная настройка. Однако для меня Supernova является платформой для взаимодействия с дизайнерами, она предоставляет более наглядный способ показать дизайнерам, что они могут сделать, и быстро информирует о том, что нужно сделать.

Кроме того, есть приятный бонус: **Supernova поддерживает "перевод" Sketch в код для Android, iOS и React-Native, но приятным сюрпризом является то, что для других технологий, кроме Flutter, требуется оплата.**В целом, Supernova действительно повышает продуктивность Flutter-разработчиков, становясь мостом между дизайнерами и программистами, хотя она и не идеальна, стоит попробовать её использование.