Удивительный ввод в эксплуатацию

Онбординг – это одна из площадок для мероприятий, где вы можете произвести впечатление на пользователя и создать брендинг. Позвольте мне показать вам, как это сделать.

Фон брендинга приложения

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

Я хочу сказать, что это должно быть что-то уникальное для вашего приложения. Не соглашайтесь на чей-то плагин, а сделайте честную попытку реализовать свое собственное решение для онбординга в отношении визуального и анимационного опыта онбординга приложения.

Что мы создаем

А вот и видео того, что мы строим:

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

Переход

Я показываю вам концентрический переход, для которого требуется клипер:

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

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

Второй компонент перехода — это настраиваемый маршрут:

В нашем случае мы используем нарастание и затухание; но мы могли бы также использовать некоторые твины.

Мы просто делаем рецепт построителя маршрута страницы, см.:

Анимация перехода между маршрутами страницы
Язык дизайна, такой как Material, определяет стандартное поведение при переходе между маршрутами (или экранами)…flutter.dev

Третий компонент — это представление страницы для реализации остальной части анимации, поскольку настраиваемый путь — это просто настраиваемое представление с анимацией:

Реализация OnBoarding

Теперь, чтобы использовать этот концентрический переход в реализации Onboarding. Во-первых, давайте создадим основную функцию:

Затем класс с примерами адаптации:

Источник

Обратите внимание, что часть реализации адаптации использует Google Fonts и набор текстовых тем и цветовых тем. Исходный код можно найти в репозитории игровой площадки flutter ui в подпапке onboarding two:

GitHub — fredgrott/flutter_ui_playground: игровая площадка флаттера для пользовательского интерфейса
игровая площадка для флаттера. Внесите свой вклад в разработку fredgrott/flutter_ui_playground, создав учетную запись на GitHub.github.com

Заключение

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

Обо мне, Фред Гротт

Я реформированный разработчик Android, Java, Kotlin и Front-End; и реформированный СДВГ, Дизайнер и Создатель.

Самое смешное в разработке и дизайне интерфейсных приложений заключается в том, что мы программируем людей, а не компьютеры. Это не кодирование или дизайн сам по себе; но кодирование и дизайн стремятся с помощью своих артефактов создать историю, чтобы захватить человека и сказать: сделай это!

Я участвую в нескольких плагинах сообщества Flutter, включая:

Виджеты платформы Flutter

https://pub.dev/packages/flutter_platform_widgets

Ловец

https://pub.dev/packages/catcher

Некоторые из моих полезных статей и руководств:

Шрифты Google, правильный путь https://medium.com/p/google-fonts-the-right-way-72a715f046a3

Простое создание UML

https://medium.com/p/easy-uml-generation-e6e16e5c8b0a

Антипаттерны состояния

https://medium.com/p/anitpatterns-of-state-610dae657ac6

Супер секретная ловушка для флаттера