Checkbox

Флажок отвечает на вопрос «да или нет»: отмечен или нет. Во FlutterFlow есть три его разновидности — Checkbox, CheckboxListTile и CheckboxGroup.

Checkbox

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

Добавление

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

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

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

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

Флажок может открываться отмеченным — например, страховка в форме заказа.

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

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

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

Настройка

Цвета

1. Выделите Checkbox и откройте раздел Checkbox Properties.
2. Цвет отмеченного и неотмеченного состояния задают свойства Checked Color и Unchecked Color.
3. Цвет самой галочки — свойство Check Color.

Скругление углов

1. Выделите Checkbox и откройте раздел Checkbox Properties.
2. Задайте значения в свойстве Border Radius для углов TL, TR, BL и BR. Кнопка с замком меняет все четыре разом.

Круглый флажок

Свойство Circular Check делает флажок круглым.

Отключение

Флажок стоит блокировать, пока условия не выполнены: например, «Совпадает с адресом доставки» бессмысленен, пока адрес доставки не указан.

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

CheckboxListTile

CheckboxListTile объединяет флажок и ListTile: в одной строке помещаются флажок, заголовок и необязательное пояснение.

Такой виджет уместен на экране настроек и в формах, где к каждому пункту нужна подпись.

CheckboxGroup

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

Добавление

1. Добавьте виджет CheckboxGroup из вкладки Form Elements.
2. По умолчанию в нём один вариант — Option 1. Чтобы переименовать, откройте раздел Define Options и измените name у свойства Option 1.
3. Новые варианты добавляются в том же разделе:
   1. нажмите Add Option;
   2. введите название в Option 2 Text.
4. Чтобы убрать вариант, нажмите крестик в свойстве с его именем.
5. Кнопка Set from Variable позволяет взять список вариантов из данных: переменной App State, ответа API, документа Firestore.

Действие при смене выбора

Как выполнить действие при смене выбора.

Заранее выбранные варианты

Часть пунктов можно отметить заранее — скажем, начинку, которая и так входит в пиццу.

Как задать вручную:

1. Выделите CheckboxGroup.
2. Откройте раздел Initially Selected.
3. Нажмите Add Selected и введите имя варианта. Оно должно в точности совпадать с именем из раздела Define Options.
4. Так же добавляются остальные отмеченные варианты.

Отметить или снять всё

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

Как добавить:

1. Выделите виджет — например, кнопку.
2. В панели свойств справа выберите Actions. Если действие первое, нажмите + Add Action; иначе — «+» под предыдущим действием и Add Action.
3. Найдите действие Clear All/Select All (раздел Widget/UI Interactions).
4. В Choose Multiselect Widget укажите нужный виджет.
5. В Action Type выберите Clear All или Select All.

Настройка

Отступы вокруг флажков

1. Выделите CheckboxGroup.
2. Найдите свойство Item Padding.
3. Задайте отступы слева, сверху, справа и снизу. Кнопка с замком меняет все четыре разом.

Цвет флажков

1. Выделите CheckboxGroup.
2. Откройте раздел Checkbox Style.
3. Active Color — цвет отмеченного флажка: нажмите на квадрат рядом с текущим цветом и выберите новый либо введите HEX-код.
4. Так же задаётся цвет самой галочки.

Рамка флажков

1. Выделите CheckboxGroup.
2. Откройте раздел Checkbox Style.
3. Check Border Color — цвет рамки.
4. Border Radius — скругление углов: значения для TL, TR, BL и BR. Кнопка с замком меняет все четыре разом.