Carousel

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

Как добавить

1. Перетащите Carousel из вкладки Layout Elements в Widget Palette.
2. Поле Active Page в панели свойств выбирает слайд, который сейчас виден на холсте и редактируется.
3. Кнопка + Add Page добавляет слайд. Лишний удаляется так: выделите его Carousel Page в дереве виджетов и нажмите Delete.
4. Внутри слайда по умолчанию лежит Image — замените его или добавьте рядом другие виджеты.

Настройки

Выделите Carousel — настройки собраны в панели свойств:

• Axis — в какую сторону листаются слайды: по горизонтали или по вертикали.
• Initial Page Index — слайд, который показывается при загрузке. Нумерация с нуля: первому слайду соответствует 0, второму 1 и так далее.
• Loop Carousel Contents — листать по кругу, с последнего слайда обратно на первый.
• Wrap Items in Center Widget — ставить содержимое слайда по центру.
• Viewport Fraction — сколько места на экране занимает активный слайд. Значение от 0 до 1.
• Shrink Factor — насколько уменьшены соседние слайды. Тоже от 0 до 1: 1 — полный размер, 0.5 — половина. Так делают карусель, где по краям видны края соседних карточек.
• Autoplay — слайды сменяются сами. Если автопрокрутка должна с последнего слайда переходить на первый, включите ещё и Loop Carousel Contents.
  • Duration — сколько миллисекунд длится переход к следующему слайду.
  • Delay — сколько миллисекунд слайд стоит на месте, прежде чем начнётся переход.

Динамические слайды

Слайды можно собрать из списка — например, из записей, которые вернул запрос к бэкенду. Выделите Carousel, откройте вкладку Generate Dynamic Children и выберите список. Дальше настройте виджеты на слайде и привяжите их значения к текущему элементу списка.

FlutterFlow повторит слайд для каждого элемента. Так делают галереи товаров, промо-блоки и отзывы — всё, где число элементов заранее неизвестно.

Действие при смене слайда

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

Выделите Carousel, откройте вкладку Actions в панели свойств, выберите On Page Change и добавьте нужное действие.

Действие Control Carousel

Действие Control Carousel даёт листать слайды кнопкой, значком или другим виджетом — а не только смахиванием.

1. Выделите кнопку или значок, который будет управлять каруселью.
2. Добавьте действие на подходящий триггер, например On Tap, и выберите Control Carousel.
3. Укажите нужную карусель и выберите вид действия.

Виды действия

• Previous — предыдущий слайд.
• Next — следующий.
• First — первый.
• Last — последний.
• Jump To — конкретный слайд по номеру, нумерация с нуля.