Ко всем кейсам

Реализация ПИН-кода во Flutter-приложении

Hola, Amigos! С вами Владимир Зевеке, Flutter dev агентства продуктовой разработки Amiga и соавтор телеграм-канала Flutter. Много. Сегодня расскажу про пакет pin_code_fields и его применение на практике.

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

Итак, рассмотрим сценарий, как это может выглядеть: юзер попадает на страницу авторизации, где ему нужно ввести свой номер телефона —> он вводит свой номер телефона —> получает на телефон СМС с кодом, который он должен ввести —> в приложении пользователь попадает на страницу ввода пин-кода, где нам как раз и понадобится пакет pin_code_fields.

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

Редактируем сам виджет пин-кода в соответствии с требованиями дизайна:

PinCodeTextField(
appContext: context,
length: 4,
controller: controller,
animationType: AnimationType.none,
mainAxisAlignment: MainAxisAlignment.start,
keyboardType: TextInputType.number,
onCompleted: onCompleted,
pinTheme: PinTheme(
fieldOuterPadding: const EdgeInsets.symmetric(horizontal: 4),
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(8),
borderWidth: 1,
fieldHeight: 81,
fieldWidth: 62,
selectedColor: Colors.red,
selectedFillColor: Color(0xFFFFFFFF),
inactiveColor: Colors.grey,
inactiveFillColor: Color(0xFFFFFFFF),
activeColor: Colors.greenAccent,
activeFillColor: Color(0xFFFFFFFF),
disabledColor:
Theme.of(context).primaryColorLight,
),
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp("[0-9]")),
],
)

И вот наш результат!

Ещё немного о самом пакете

У этого виджета есть пачка коллбэков:

- Function? onTap (функция, отрабатывающая при касании виджета);
- Function(String)? onSubmitted (возвращает набранный текст, когда пользователь нажимает «Готово/следующее действие» на клавиатуре);
- Function()? onEditingComplete (функция, отрабатывающая при завершении редактирования; отличается от onSubmitted, поскольку имеет значение по умолчанию, которое обновляет текстовый контроллер);
- Function(String)? onChanged (функция, отрабатывающая при изменении вводимого текста);
- Function(String)? onCompleted (функция, отрабатывающая при полном заполнении полей виджета);
- Function(String?)? onSaved (вызов с окончательным значением при сохранении формы с помощью FormState.save).


Также PinCodeTextField поддерживает валидирование текста и декорирование состояния ошибки:


- String? Function(String?)? validator (валидатор полей);
- AutovalidateMode autovalidateMode (определяет режим валидирования);
- StreamController? errorAnimationController (контроллер для анимации перехода в состояние ошибки);
- int errorAnimationDuration (длительность анимации перехода в состояние ошибки);
- TextDirection errorTextDirection (определяет направление текста ошибки);
- EdgeInsets errorTextMargin (margin для текста ошибки);
- errorTextSpace (вертикальный отступ для текста ошибки).


Ещё у этого виджета есть свой собственный класс декораций, PinTheme, со множеством полезных настроек:


- PinCodeFieldShape? Shape (форма текстовых полей);
- BorderRadius? borderRadius (радиус скругления границ формы);
- EdgeInsetsGeometry? fieldOuterPadding (отступы формы относительно других форм полей);
- double? borderWidth (ширина границ формы);
- double? fieldHeight (высота формы);
- double? fieldWidth (ширина формы);
- Color? selectedColor (цвет границы формы при фокусе на данное поле);
- Color? selectedFillColor (цвет формы при фокусе на данное поле);
- Color? inactiveColor (цвет границы формы, в которой нет входных данных);
- Color? inactiveFillColor (цвет формы, в которой нет входных данных);
- Color? activeColor (цвет границы формы, в которой есть входные данные);
- Color? activeFillColor (цвет формы, в которой есть входные данные);
- Color? disabledColor (цвет формы, которая отключена).


И другие поля, которые часто используются:


- TextEditingController? Controller (контроллер текстовых полей виджета);
- AnimationType animationType (режим анимации);
- MainAxisAlignment mainAxisAlignment (режим выравнивания);
- TextInputType keyboardType (режим клавиатуры);
- List inputFormatters (лист TextInputFormatter, форматирующих текст).


На самом деле, это меньшая часть полей и возможностей данного виджета, я назвал лишь наиболее полезные.


Надеюсь, вам было полезно! Делитесь в нашем чате мобильных разработчиков о своем опыте применения пакета pin_code_fields.

А также всегда ждем вас в нашем телеграм-канале Flutter. Много, который мы ведем командой мобильных разработчиков. Рассказываем про свой личный опыт и делимся советами от софт-скиллов до технических знаний. Присоединяйтесь!

Хотите связаться с владельцем
компании напрямую?
Дмитрий Тарасов
Дмитрий Тарасов
СЕО

НАПИСАТЬ