Недавно команда FlutterFlow обратилась к команде gskinner, чтобы расширить границы платформы для создания сложных и выразительных интерфейсов. Так появились новые дизайнерские функции для разработчиков приложений!

Тот случай, когда выгоду от сотрудничества извлекли обе стороны (прямо как от нашего бесплатного онлайн-практикума по мобильной разработке).

AI Caption Generator Vignette

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

Благодаря Gesture Detector генератор имеет интересный и динамичный интерфейс и большую гибкость для реализации уникальных дизайнов внутри FF (даже без использования пользовательских виджетов!).

Подсказка GPT включает в себя вводимые данные по типу длины символа, эмодзи и количества хэштегов. Все это влияет на настроение и значение тона, помогает настроить стиль письма.

AI Caption Generator Vignette включает в себя:

• Пользовательский компонент слайдера, который использует как Drag Update, так и действия жеста Tap для получения localPosition. Поменяйте дорожку, большой палец или деления сегмента в соответствии с вашим дизайном.
• Новый элемент управления в двухосевом стиле с настраиваемым действием для преобразования координат жеста панорамирования по осям X и Y в подсказки по весу.
• Пример мультимодального вызова API для OpenAI.

Smart Home Hub Vignette

Вторая виньетка создана на основе хаба «умного дома» — привычного пользовательского интерфейса с множеством возможностей для взаимодействия. Для визуального дизайна нужен был уровень сложности, который мог бы бросить вызов возможностям FlutterFlow UI Builder, но реализация сложной эстетики была простой и не требовала никаких пользовательских виджетов для достижения.

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

Smart Home Hub Vignette включает в себя:

• Многофункциональный компонент световых плиток, позволяющий переключать состояние и регулировать яркость с помощью жеста Drag Update.
• Многоразовый шаблон устройства, который заменяет пользовательские элементы управления с помощью параметра Widget Builder.
• Компонент радиального термостата, полностью построенный на виджетах FlutterFlow Builder. Его жест Drag опирается на дельту, чтобы накапливать/уменьшать значения.

Fitness Onboarding Vignette

В заключительной виньетке gskinner создали практичный и отзывчивый поток онбординга. Для этого они использовали инновационные подходы к дизайну, включая скевоморфные элементы.

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

Дизайнеры также добавили небольшой интересный фоновый эффект, который неявно анимируется по мере продвижения индекса PageView.

Fitness Onboarding Vignette включает в себя:

• Простой многошаговый процесс адаптации, построенный на виджете PageView, с пользовательскими сочетаниями клавиш для навигации по процессу.
• Три уникальных подхода к селекторам на основе жестов в элементах управления возрастом, ростом и весом, дополненные тактильными эффектами, которые помогают создать реальные тактильные ощущения.
• Встроенная 3D-сцена Spline, настраиваемая в зависимости от вводимых пользователем данных.

Резюмируем: получить все три виньетки абсолютно бесплатно можно на FlutterFlow Marketplace. Мы надеемся, что вы сможете использовать их в качестве отправной точки для своих собственных проектов, учиться на коде или просто вдохновляться!