Вспомогательные действия

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

Выбор цвета [Action]

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

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

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

1. Выберите Виджет (например, 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.

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

Добавление действия выбора цвета

Настройка палитры цветов

Выбор даты и времени [Action]

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

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

Типы Date/Time Picker

Можно выбрать один из следующих типов диалогового окна для выбора даты и времени:

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

Инструкции по добавлению действия к любому виджету:

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

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

к сведению

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

Пример добавления действия выбора даты и времени и отображения значения в виджете Text:

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

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

Обновление счётчика значков приложения (только для iOS) [Action]

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

Поддержка платформы

На Android значки автоматически появляются на иконках приложения при наличии push-уведомлений. На iOS необходимо настроить счётчик вручную, как показано ниже.

Инструкции для добавления действия к любому виджету:

1. Выберите виджет (например, Container, Button и т.д.), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
3. Нажмите + Add Action.
4. В правой части найдите и выберите Update App Badge Count (в разделе Alerts/Notifications).
5. Установите значение Badge Count Value.

Копирование в буфер обмена [Action]

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

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

Инструкции для добавления действия к любому виджету:

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

warning

В настоящее время тестирование этого действия невозможно в режиме Test, но его можно проверить в режиме Run.

Настройка тёмной темы [Action]

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

В зависимости от системы

Настройка темы вручную

Типы настройки тёмной темы

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

• From System: Настраивает режим Light/Dark в зависимости от предпочтений системы. Если у пользователя установлен тёмный режим на Android/iOS, то и приложение будет автоматически настроено на тёмный режим.
• Light Mode: Устанавливает светлый режим темы.
• Dark Mode: Устанавливает тёмный режим темы.

Перейдите на страницу проекта в FlutterFlow и выполните следующие шаги для добавления действия настройки темы:

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.

Отправка Email [Action]

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

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

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

Набор номера [Action]

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

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

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

Отправка SMS [Action]

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

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

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