Переключатели

Переключатель — простейший способ дать пользователю выбор из двух состояний: включено или выключено. Во FlutterFlow их два: Switch и SwitchListTile.

Switch

Switch — обычный тумблер: ползунок с двумя положениями. Настраиваются цвета и начальное состояние.

Добавление

Соберём пример, где значение переключателя выводится в виджете Text:

Порядок действий:

1. Нажмите + Add Widget и перетащите Switch из вкладки Base Elements — или добавьте его прямо в дерево виджетов.
2. Под переключателем добавьте виджет Text, в панели свойств нажмите Set from Variable и выберите Widget State > switchValue (имя вашего переключателя).

Начальное значение

Переключатель может открываться включённым или выключенным — например, доступ к геолокации разумно показывать выключенным.

1. Выделите Switch и найдите в панели свойств Switch Initial Value.
2. Отметьте галочку вручную или нажмите Set from Variable, чтобы взять значение из данных — ответа API, поля документа. В этом случае источник должен возвращать логическое значение.

Сохранение значения

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

Настройка

Внешний вид и поведение настраиваются в панели свойств.

Цвета

Выделите Switch и откройте раздел Switch Properties. Здесь задаются цвета:

• Active Color — цвет ползунка во включённом положении.
• Active Track Color — цвет дорожки во включённом положении.
• Inactive Track Color — цвет дорожки в выключенном положении.
• Inactive Thumb Color — цвет ползунка в выключенном положении.

Отключение

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

Откройте панель свойств, включите Switch Disable Options, нажмите Unset и задайте условие. Цвета заблокированного состояния настраиваются свойствами Disabled Active Color, Disabled Active Track Color, Disabled Inactive Track Color и Disabled Inactive Thumb Color.

SwitchListTile

SwitchListTile объединяет переключатель и ListTile: тумблер, заголовок и необязательное пояснение в одной строке.

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

Добавление

1. Перетащите SwitchListTile из вкладки Base Elements внутрь Column.
2. По умолчанию переключатель включён.
   1. Чтобы он открывался выключенным, снимите галочку Switch Initial Value.
   2. Чтобы значение приходило из данных — переменной App State, ответа API, — нажмите Set from Variable и укажите источник.
3. Заголовок задаётся свойством Text в разделе Title.
4. Пояснение — свойством Text в разделе Subtitle.

Оформление под платформу

Виджет умеет подстраиваться под платформу. В режиме Adaptive он выглядит нативно: на iOS — по-иосовски, на Android — по-андроидному.

1. Выделите SwitchListTile в дереве виджетов или на холсте.
2. Откройте раздел Platform в панели свойств.
3. Выберите Platform Type: Adaptive или Android.

Настройка

Цвет переключателя

1. Выделите SwitchListTile.
2. Откройте раздел Switch List Tile Properties.
3. Thumb Color — цвет ползунка: нажмите на квадрат рядом с текущим цветом и выберите новый либо введите HEX-код.
4. Track Color — цвет дорожки; задаётся так же.

Переключатель слева

Чтобы тумблер стоял перед заголовком:

1. Выделите SwitchListTile.
2. Откройте раздел Switch List Tile Properties.
3. Отметьте свойство Leading.