SwipeableStack

SwipeableStack — стопка карточек, которую листают, смахивая верхнюю. Подходит для подбора товаров, фотоподборок и анкет.

Как добавить

Карточки можно задать вручную или построить из списка данных. Набор вручную:

1. Добавьте SwipeableStack из раздела Layout Elements в Widget Palette.
2. Выделите SwipeableStack и в Active Page на панели свойств выберите карточку, которую будете править. Изначально карточек четыре, в дереве виджетов каждая — отдельная SwipeableStack Page.
3. Замените стандартный Image на каждой странице своим содержимым — например, фото товара и коротким описанием.
4. Новая карточка — + Add Page под Active Page. Чтобы удалить карточку, выделите её SwipeableStack Page в дереве виджетов и нажмите Delete.

Карточки из запроса к бэкенду

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

Четыре стандартные страницы рассчитаны на фиксированный набор. Для карточек из запроса оформите одну страницу как шаблон, который будет повторяться.

1. Выделите SwipeableStack и откройте Backend Query на панели свойств.
2. Добавьте запрос к коллекции или таблице.
3. Оформите одну SwipeableStack Page как шаблон карточки и привяжите Image, Text и остальные виджеты к полям текущего документа или строки.

FlutterFlow покажет по карточке на каждую запись из запроса — оформить и привязать нужно только шаблон.

Свайп кнопками

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

Как подключить кнопку:

1. Добавьте на страницу Button вне SwipeableStack.
2. Выделите кнопку, откройте Actions и добавьте действие на On Tap.
3. В Define Action выберите Swipeable Stack, укажите Swipeable Stack to Control и вариант в Card Swipe Type. Какие есть варианты — в разделе действие Swipeable Stack.
4. Для остальных кнопок повторите шаги, выбрав каждой свой тип свайпа.

Реакция на свайп

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

1. Выделите SwipeableStack и откройте Actions > Action Flow Editor.
2. Выберите On Page Swipe, чтобы реагировать на любое направление, или On Left Swipe, On Right Swipe, On Up Swipe, On Down Swipe — для конкретного.
3. Добавьте действие, которое должно выполниться.

Действие Swipeable Stack

Действие Swipeable Stack смахивает текущую карточку. В Card Swipe Type выберите:

• Trigger Left Swipe — влево;
• Trigger Right Swipe — вправо;
• Trigger Up Swipe — вверх;
• Trigger Down Swipe — вниз.

Настройка

Выделите SwipeableStack и откройте SwipeableStack Properties на панели свойств:

• Loop — после последней карточки снова показывается первая. Выключите, если стопка должна заканчиваться.
• Allowed Swipe Direction — разрешённые направления: All, Left, Right, Up, Down, Horizontal или Vertical. Например, Horizontal — только влево и вправо.
• Card Display Count — сколько карточек видно в стопке одновременно.
• Next Card Scale — размер карточки под верхней. Значение меньше 1 делает её мельче.
• Swipe Threshold — насколько далеко нужно утащить карточку, чтобы свайп засчитался. Значение от 0 до 1: чем больше, тем длиннее жест.
• Max Angle — максимальный наклон карточки при свайпе.
• Back Card Offset — сдвиг нижних карточек относительно верхней по Horizontal и Vertical.
• Card Padding — отступы вокруг карточки: одинаковые со всех сторон или отдельно сверху, снизу, слева и справа.