FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

SwipeableStack

The SwipeableStack widget creates a stack of widgets that are arranged in a typical overlapping fashion (the first/top widget is fully visible, whereas subsequent widgets appear to be placed beneath it). You can remove the widget on the top by swiping it in any direction.
For example, using this widget to build the 'Tinder-like swipe' user experience.
SwipeableStack widget

Adding SwipeableStack

Let's see how to add the SwipeableStack widget by building an example that looks like this:
SwipeableStack widget example
Here are the step-by-step instructions:
  1. 1.
    First, click on the + Add Widget and drag the SwipeableStack widget from the Layout Elements tab or add it directly from the widget tree.
  2. 2.
    Add a Card > Column (with Cross Axis Alignment -> Start) inside the SwipeableStack.
  3. 3.
    Add one Image widget inside the Column and set its Width to 100% and Height to 50%.
  4. 4.
    To display the title, add the Text widget, set its Theme Text Style to Title 1, and left + top padding to 8.
  5. 5.
    Similarly, to display the description add one more text widget and set its Theme Text Style to Subtitle 2.
  6. 6.
    To show multiple cards, you can copy the Card widget and paste it a few times inside the SwipeableStack widget.
Adding SwipeableStack widget

Showing backend data

You might need to show the list of cards from your backend in the SwipeableStack widget.
We allow you to fetch the backend data from the following sources:

1. Showing data from Firestore

You might use the Firstore to store your app data in the collection-document model. Let's see how you can display the items from the Firestore collection in the SwipeableStack by building an example that looks like the one below:
Showing data from the Firestore example

Prerequisites

Before you fetch data from Firestore, ensure you incorporate all the prerequisites to have some data in Firestore.
The collection should look like this:
cats collection
To show data from Firestore:
  1. 1.
    First, query a collection on a SwipeableStack to get a list of documents from the Firestore collection (instructions are similar to querying a collection on ListView).
  2. 2.
    ​Display the data (cat information) on UI elements such as Image and Text.
Showing data from Firestore

2. Showing data from API call

You might be using your own infrastructure to store your app data. And it can be retrieved via API calls. Let's see how to do it by building an example that looks like the one below:
Showing data from the Firestore example

Prerequisites

Before you show data from an API call, ensure you incorporate all the mentioned prerequisites.
After adding an API call in FlutterFlow, it looks like this:
Defining API call
Adding JSON path

2.1 Making an API call on a SwipeableStack

Making an API call allows you to get a response (containing the list of items) and show them in the SwipeableStack.
To make an API call on a SwipeableStack:
  1. 1.
    Select the SwipeableStack widget from the widget tree or the canvas area.
  2. 2.
    Click on the Backend Query tab (on the right side of your screen).
  3. 3.
    Set the Query Type to API Call.
  4. 4.
    Set the Group or Call Name to the API Name that fetches the data.
  5. 5.
    Click Confirm.
Making an API call on a SwipeableStack

2.2 Generating dynamic children

Generating dynamic children help you prepare a list of items present in the API response. The returned result is stored in a variable that you can use to populate the SwipeableStack.
To generate dynamic children:
  1. 1.
    Select SwipeableStack from the widget tree or the canvas area.
  2. 2.
    Click on the Generate Dynamic Children tab (on the right side of your screen).
  3. 3.
    Enter the appropriate Variable Name.
  4. 4.
    Click on the UNSET and set the source value to the [apicall_name] Response.
  5. 5.
    Set the API Response Options to JSON Body.
  6. 6.
    Set the Available Options to JSON Path.
  7. 7.
    Inside the JSON Path Name and JSON Path, enter the JSON expression to retrieve the list. See how to get JSON Path here.
  8. 8.
    Click Confirm.
Generating dynamic children

2.3 Showing data in UI elements

To show the data (cat information) on UI elements such as Image and Text:
  1. 1.
    Select the Image widget, move to the properties panel, find the Path property and click on the Set from Variable text.
  2. 2.
    Select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.
  3. 3.
    Set the Available Options to JSON Path.
  4. 4.
    Inside the JSON Path, enter the JSON expression to retrieve the image URL. See how to get JSON Path here.
  5. 5.
    Click Confirm.
  6. 6.
    Similarly, Select the Text Widget. Move to the property editor and set the data for the Text property.
Showing data in UI elements

Swipe card on button press

You might want to allow users to swipe the cards with a button press. For example, the swipe card on tapping the unlike or reject button and right swipe card on tapping the like or accept button. You can do so by adding the Control Swipeable Stack action.
Swipe card on button press
Here's how you can swipe the card with a button press:
  1. 1.
    First, add the SwipeableStack widget.
  2. 2.
    Add a couple of buttons inside the card widget. (e.g., like or unlike button).
  3. 3.
    Now select any button and define the Control Swipeable Stack action.

Get notified on swipe

You might want to get a callback when the child widget (e.g., card) gets swiped and add further actions. For example, updating the item (like or unlike flag) in the backend based on the swipe type (left or right).
Here is how you can get a callback when the child widgets get swiped:
  1. 1.
    Select the SwipeableStack widget from the widget tree or the canvas area.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
  3. 3.
    Select the swipe type (among the On Widget Swipe, On Left Swipe, On Right Swipe, On Up Swipe, On Down Swipe) on which you would like to get a callback. If the swipe direction is not important to you, select On Widget Swipe.
  4. 4.
    Now you can add any action that will be triggered upon receiving the selected callback—for example, showing the Snackbar message on swipe.
Get notified on swipe

Customizing

You can customize the appearance of this widget using the various properties available under the properties panel.

Changing the card size

To change the size of the top, middle, and bottom card:
  1. 1.
    Select the SwipeableStack widget from the widget tree or the canvas area and move to the properties panel
  2. 2.
    To change the height and width of the top card, enter the value between 0 to 1 into the Top Card Height Fraction and Top Card Width Fraction. Note: These values will be counted as a percentage value. For example, if you enter 0.5, the card will occupy 50% of the available space.
  3. 3.
    Similarly, you can adjust the height and width of the middle and bottom card.
Changing the card size
Previous
StaggeredView
Next
FlippableCard
Last modified 5mo ago