Несколько дней назад я просматривал Твиттер и наткнулся на красивую форму ввода кредитной карты для Интернета и мобильных устройств. Я решил принять это как вызов и реализовать с помощью Flutter. Полный исходный текст доступен здесь.
Приложение состоит из трех основных виджетов, как определено ниже:
- Кредитная карта - основной виджет, содержащий текстовые поля ввода пользователя.
- CreditCardFront - лицевая сторона кредитной карты.
- CreditCardBack - обратная сторона кредитной карты.
Приложение также использует пакет flip_card для выполнения анимации переворота между передним и задним виджетами.
Передняя часть кредитной карты
Когда приложение загружено, пользователю предоставляется пустой заполнитель кредитной карты. За этот интерфейс отвечает виджет CreditCardFront. Интерфейс виджета CreditCardFront состоит из виджета Stack и виджетов Positioned, как показано в реализации ниже:
Мы использовали функцию ClipRRect, чтобы вырезать круглую область, чтобы углы контейнера были скругленными. Мы также использовали размытие фона для контейнера, предоставив изображение с подгонкой BoxFit.cover.
Конструктор CreditCardFront принимает номер и имя кредитной карты в качестве аргументов, которые позже вводятся в виджет.
Возврат кредитной карты
Задняя часть кредитной карты - это просто уменьшенная версия передней части. Единственное отличие состоит в том, что на нем не отображается логотип компании, номер кредитной карты и имя.
Конструктор CreditCardBack принимает защитный код в качестве аргумента, который позже отображается на обратной стороне карты.
Кредитная карта
Виджет CreditCard является родительским виджетом для CreditCardFront и CreditCardBack. Виджет CreditCard также содержит виджет FlipCard, который отвечает за перелистывание спереди назад и наоборот.
FlipCard переворачивается в зависимости от значения cardKey. Мы можем переключать значение cardKey в зависимости от пользовательских условий. Ниже вы можете увидеть, как мы переключаем cardKey в зависимости от того, нажал ли пользователь код безопасности.
В настоящее время Flutter не поддерживает привязки. Было бы здорово, если бы команда Flutter могла потратить время на добавление двусторонней привязки к фреймворку Flutter, поскольку это значительно уменьшит общий код.
Вы можете найти финальную анимацию ниже:
Если вам понравилась эта статья и вы хотите поддержать мою работу, посмотрите мои курсы на Udemy. В настоящее время я работаю над промежуточным курсом по Flutter, который будет доступен в будущем.
Пожалуйста, не используйте номер кредитной карты в видео выше, это моя настоящая кредитная карта. Спасибо!
