Slider

Slider позволяет выбрать одно значение из диапазона: вы задаёте минимум и максимум, пользователь тянет ползунок. Так настраивают громкость, сумму пожертвования, фильтр по цене.

совет
Состояние виджета

Перед работой с виджетами форм загляните в раздел про состояния виджетов — оттуда берётся выбранное значение.

Как добавить

Соберём пример: ползунок и текст, показывающий его значение.

Порядок такой:

  1. Добавьте Slider из вкладки Form Elements или вставьте его в дерево виджетов.
  2. Рядом добавьте Text — он будет показывать значение.
  3. Не снимая выделения с Text, нажмите Set from Variable в панели свойств:
    1. Source — Widget State.
    2. Available Options — Slider. Если ползунков несколько, они называются Slider1, Slider2 и так далее.
    3. При необходимости задайте Number Format Option.
    4. Нажмите Confirm.

Действие при изменении

Как запустить действие при смене значения.

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

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

Настройки

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

Платформенный стиль

Platform Type принимает значения Adaptive и Android. При Adaptive виджет выглядит по-родному на каждой платформе: на iOS — как ползунок iOS, на Android — как Android.

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

Границы диапазона

  1. Выделите Slider.
  2. Прокрутите панель свойств до раздела Slider Properties.
  3. Min — начало диапазона.
  4. Max — конец диапазона.

Шаг

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

инфо

Если диапазон не делится на шаг нацело, ползунок остановится на ближайшем допустимом значении.

  1. Выделите Slider.
  2. Прокрутите панель свойств до Slider Properties.
  3. Задайте Step Size.

Цвета

  1. Выделите Slider.
  2. Прокрутите панель свойств до Slider Properties.
  3. Active Color — цвет пройденной части дорожки: щёлкните по квадрату рядом с текущим цветом, выберите оттенок и нажмите Use Color либо введите hex-код. Цвет можно подобрать кнопками Palette и Simple.
  4. Inactive Color — цвет оставшейся части, задаётся так же.

Подсказка со значением

Во время перетаскивания над ползунком может показываться текущее значение.

  1. Выделите Slider.
  2. Прокрутите панель свойств до Slider Properties.
  3. Включите Show Value.

перевод официальной документации FlutterFlow

обновлено

⌕ ESC