Hola, Amigos! С вами Владимир Зевеке, Flutter dev агентства продуктовой разработки Amiga и соавтор телеграм-канала Flutter. Много. Сегодня расскажу про пакет pin_code_fields и его применение на практике.
Пакет полезен для авторизации в приложении по номеру телефона. Покажу реализацию на примере проекта, над которым работаю сейчас. Проект находится под NDA, поэтому могу сказать, что это сфера здоровья. Но авторизация в приложении по одноразовому коду много где встречается, например, банки, e-com, услуги доставки и так далее.
Итак, рассмотрим сценарий, как это может выглядеть: юзер попадает на страницу авторизации, где ему нужно ввести свой номер телефона —> он вводит свой номер телефона —> получает на телефон СМС с кодом, который он должен ввести —> в приложении пользователь попадает на страницу ввода пин-кода, где нам как раз и понадобится пакет pin_code_fields.
Разберемся, как этот виджет пин-кода был реализован. Для начала, вынесем виджет в отдельный файл, чтобы не грузить текстом файл с вёрсткой страницы. Редактируем сам виджет пин-кода в соответствии с требованиями дизайна:
И вот наш результат!
Ещё немного о самом пакете
У этого виджета есть пачка коллбэков:
- 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. Много, который мы ведем командой мобильных разработчиков. Рассказываем про свой личный опыт и делимся советами от софт-скиллов до технических знаний. Присоединяйтесь!