Утилитарные действия

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

Color Picker [Action]

С помощью этого действия вы можете позволить пользователям выбрать любимый цвет из палитры или введя значение HEX/RGB. Например, вы можете использовать его, чтобы дать клиентам возможность выбрать цвет предлагаемого продукта.

При срабатывании этого действия открывается селектор цвета, где пользователи могут настроить цвет. Селектор цвета закроется после выбора нужного цвета, и выбранный цвет станет доступен через Widget State > Color Picked.

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Container, Button и т. д.), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню). Если это первое действие, нажмите кнопку + Add Action. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (в Action Flow Editor) и выберите Add Action.
3. Найдите и выберите действие Color Picker (в разделе Widget/UI Interactions).
4. При открытии селектора цвета по умолчанию выбран основной цвет. Чтобы изменить его, установите Initially Selected Color.
5. Вы также можете настроить внешний вид селектора цвета, изменив цвет Text, Background и Button.
6. По умолчанию селектор цвета позволяет пользователям добавлять непрозрачность к цвету. Чтобы разрешить выбор только непрозрачных цветов, отключите переключатель Allow Opacity.
7. Недавние цвета помогают пользователям выбрать любой ранее использованный цвет. Если вы не хотите их показывать, отключите переключатель Show Recent Color.
8. Выбранный цвет теперь доступен в Widget State > Color Picked. Вы можете получить к нему доступ из свойства цвета любого виджета или нажать кнопку "+" и добавить следующее действие, чтобы обновить выбранный цвет в вашем backend или состоянии приложения.

к сведению

После того как пользователь выберет нужный цвет, селектор закроется автоматически, и выбранный цвет можно будет получить через Widget State > Color Picked.

Вот пример добавления действия селектора цвета и обновления выбранного цвета в переменной состояния приложения.

Adding color picker action

Customize color picker

DateTime Picker [Action]

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

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

Types Date/Time Picker

Вы можете выбрать открытие одного из следующих типов диалога Date/Time picker:

• Date: Позволяет выбрать только дату.
• Date+Time: Позволяет выбрать дату, за которой следует время.
• Time: Позволяет выбрать только время.

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Container, Button и т. д.), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню). Если это первое действие, нажмите кнопку + Add Action. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (в Action Flow Editor) и выберите Add Action.
3. Найдите и выберите действие Date/Time Picker (в разделе Widget/UI Interactions).
4. Установите тип селектора даты/времени.
5. По умолчанию селектор показывает текущую дату/время. Вы можете изменить это, скорректировав Default Date/Time.
6. Чтобы определить диапазон выбираемых дат, используйте свойства Minimum Date/Time и Maximum Date/Time. Нажмите Unset, чтобы указать свои даты.
7. Управляйте возможностью выбора прошлых и будущих дат/времени с помощью Allow Past Date/Time и Allow Future Date/Time. Подсказка: Если вы явно установите минимальную или максимальную дату, эта опция будет отключена.
8. Для отображения в стиле iOS активируйте переключатель Use Cupertino-style.

9. Для более персонализированного стиля отключите Use Default Theme и настройте параметры в разделе Appearance Properties.

к сведению

После того как пользователь выберет нужную дату и время, селектор закроется автоматически, и выбранную дату/время можно будет получить через *Widget State > Date Picked.

Вот пример добавления действия селектора даты и времени и отображения значения в виджете Text.

Biometric Verification [Action]

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

При срабатывании этого действия оно проверяет наличие зарегистрированной биометрии. Если такая найдена, оно запрашивает у пользователей подтверждение их личности. Если биометрическая аутентификация не удалась, открывается опция блокировки экрана (например, Pattern, PIN, Password, Swipe и т. д.) как запасной метод аутентификации.

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

Перейдите на страницу вашего проекта в FlutterFlow и следуйте инструкциям ниже, чтобы определить действие для любого виджета.

1. Выберите Widget (например, Button), к которому хотите определить действие.
2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
3. Нажмите + Add Action.
4. В правой части найдите и выберите действие Biometric Verification (в разделе Utilities).
   1. По умолчанию, если биометрическая верификация не удалась, открываются учетные данные на устройстве, такие как Pattern и PIN. Это помогает в случае, когда биометрический датчик не может распознать действительный отпечаток пальца или лицо. Однако вы можете отключить это поведение и разрешить только биометрическую верификацию. Для этого активируйте переключатель Allow biometric only.
   2. Введите текст Biometric Reason text. Это сообщение отображается внутри интерфейса биометрического распознавания.
   3. Укажите Action Output Variable Name. Статус биометрической верификации — True (успех) или False (неудача) — сохраняется в этой переменной. Вы можете использовать эту переменную для определения следующего действия. Например, для показа сообщения об успехе или неудаче.
   4. Чтобы показать сообщение об успехе или неудаче, добавьте действие Add Conditional, нажав кнопку + внутри уже добавленного действия.
      1. Нажмите UNSET, выберите Action Output и укажите имя переменной вывода действия.
      2. В разделе TRUE добавьте действие для показа снэкбара с сообщением об успехе.
      3. Аналогично добавьте сообщение о неудаче в раздел FALSE.

Copy to Clipboard [Action]

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

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

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Button), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
3. Нажмите + Add Action.
4. Найдите и выберите действие Copy to Clipboard (в разделе Utilities).
5. Скорее всего, это значение будет динамическим; поэтому вы можете установить Value Source в From Variable и указать Source соответственно.

warning

На данный момент протестировать это действие в режиме Test невозможно, но вы можете использовать режим Run для этой цели.

Set Dark Mode Setting [Action]

С помощью этого действия вы можете установить тему приложения в режим Light/Dark или настроить её в соответствии с системными настройками.

As Per System

Manually Setting Theme Mode

Types of Dark Mode Setting

Существует три типа режима, который вы можете установить:

• From System: Устанавливает режим Light/Dark на основе системных предпочтений. Это значит, что вам не нужно создавать переключатель Light/Dark Mode в вашем приложении. Темный режим будет установлен автоматически, если пользователь включил темный режим в операционной системе Android/iOS.
• Light Mode: Устанавливает режим темы в Light.
• Dark Mode: Устанавливает режим темы в Dark.

Перейдите на страницу вашего проекта в FlutterFlow и следуйте инструкциям ниже, чтобы определить действие Set Dark Mode Setting для любого виджета.

1. Выберите Actions в панели свойств (правое меню)
2. Нажмите кнопку + Add Action
3. Выберите жест из выпадающего списка: On Tap, On Double Tap или On Long Press.
4. Установите Action Type в Set Dark Mode Setting.
5. Установите Setting Source в Select Setting.
6. Установите Dark Mode Setting в один из вариантов: From System, Light Mode, Dark Mode.

Send Email [Action]

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

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Button), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
3. Найдите и выберите действие Send Email (в разделе Share).
4. В разделе Email Address укажите действительный адрес электронной почты. Ваше сообщение будет отправлено на этот адрес.
5. Также укажите Subject и Body отправляемого сообщения.

Call Number [Action]

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

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Button), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
3. Найдите и выберите действие Call Number (в разделе Share).
4. В разделе Phone Number укажите действительный номер телефона. Звонок будет совершен на этот номер.

Send SMS [Action]

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

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Button), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
3. Найдите и выберите действие Send SMS (в разделе Share).
4. В разделе Phone Number укажите действительный номер телефона. Ваше сообщение будет отправлено на этот номер.
5. В разделе SMS Body укажите сообщение, которое вы хотите отправить.