SwipeableStack

The SwipeableStack lets users browse a stack of cards by swiping the top card away. You can use it for product choices, photo collections, or profiles.

Adding a SwipeableStack

You can add a fixed set of cards or generate cards from a list of data. To create a fixed set:

1. Add SwipeableStack from Layout Elements in the Widget Palette.
2. Select the SwipeableStack and use Active Page in the Properties Panel to choose the card you want to edit. The widget starts with four cards, each shown as a SwipeableStack Page in the Widget Tree.
3. Replace the default Image widget on each page with your own card content. For example, add an image and a short description for each product.
4. To add a card, click + Add Page under Active Page. To remove one, select its SwipeableStack Page in the Widget Tree and press Delete.

Loading Cards From a Backend Query

Use a backend query when cards should come from your database. For example, a bookstore can show one card per book without creating a separate page for every item.

The four default pages are for a fixed set of cards. For query-backed cards, design one page as the repeated card template.

1. Select the SwipeableStack and open Backend Query in the Properties Panel.
2. Add a collection or table query.
3. Design a SwipeableStack Page as the card template. Bind the Image, Text, and other widgets on that page to fields from the current document or row.

FlutterFlow displays a card for each record that the query returns. You only need to design and bind the template card.

Swipe a Card With Buttons

You can let users swipe without dragging a card. For example, use a Skip button for a left swipe and a Save button for a right swipe. Place the buttons outside the SwipeableStack so they remain visible as cards change.

To connect a button:

1. Add a Button to the page, outside the SwipeableStack.
2. Select the Button, open Actions, and add an On Tap action.
3. In Define Action, choose Swipeable Stack. Select the Swipeable Stack to Control, then choose an option under Card Swipe Type. See Swipeable Stack Action for the available swipe types.
4. To add more swipe buttons, repeat these steps and choose a swipe type for each button.

Respond to a Swipe

Add an action trigger to run a flow when a card is swiped. For example, an On Right Swipe flow can save the current product to a favorites list.

1. Select the SwipeableStack and open Actions > Action Flow Editor.
2. Choose On Page Swipe to respond to any direction, or choose On Left Swipe, On Right Swipe, On Up Swipe, or On Down Swipe for a specific direction.
3. Add the action you want to run when that trigger fires.

Swipeable Stack Action

The Swipeable Stack action swipes the current card. Set Card Swipe Type to one of these options:

• Trigger Left Swipe: Moves the current card left.
• Trigger Right Swipe: Moves the current card right.
• Trigger Up Swipe: Moves the current card up.
• Trigger Down Swipe: Moves the current card down.

Customizing the SwipeableStack

Select the SwipeableStack and open SwipeableStack Properties in the Properties Panel:

• Loop: Returns to the first card after the last card is swiped. Turn it off if users should reach the end of the stack.
• Allowed Swipe Direction: Limits swipes to All, Left, Right, Up, Down, Horizontal, or Vertical. For example, choose Horizontal when cards should move only left or right.
• Card Display Count: Sets how many cards are visible in the stack at once.
• Next Card Scale: Sets the size of the card behind the top card. A value below 1 makes it appear smaller.
• Swipe Threshold: Sets how far a user must drag a card to complete a swipe. The value is between 0 and 1; a higher value requires a longer drag.
• Max Angle: Sets how far a card can rotate during a swipe.
• Back Card Offset: Sets the Horizontal and Vertical distance between the top card and the cards behind it.
• Card Padding: Sets the space around each card. Apply the same padding on all sides, or set the top, bottom, left, and right values separately.