Links

StaggeredView

The StaggeredView widget displays a list of items in a staggered grid fashion.
For example, you can use StaggeredView to show a list of pictures, similar to the Pinterest app.
StaggeredView widget

Adding StaggeredView

To create a simple StaggeredView with some images:
  1. 1.
    First, drag the StaggeredView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  2. 2.
    Now add some Image widgets. Again drag it from the Layout Elements tab or add it directly from the widget tree. Note: To see the staggered view effect, try removing the height of all the images or giving a different height to each image.
Adding StaggeredView

Enable Pull to Refresh

To enable pull to refresh on this widget, please follow the instructions here.

Showing backend data

You probably want to show a list of items from your backend. There are two primary sources from which you can get the data.

1. Showing data from Firestore

To show data from Firestore, create a collection, query a collection and then display the data in the Image widget.
Pictures collection
Showing pictures from Firestore

2. Showing data from API call

You may be using your own infrastructure to store your app data. Let's see how you can display the data retrieved via API calls.
Showing data from API call
Showing data from API calls comprises the following steps:

2.1 Prerequisites

Before we show data from an API call, make sure you incorporate all the mentioned prerequisites.
  1. 1.
    Be familiar with API calls.​
  2. 2.
    ​Add API calls inside the FlutterFlow project.
If you haven't set up API calls at your backend side yet, you can use any open API to try it out. Maybe you can try this https://picsum.photos/v2/list​
After adding an API call in FlutterFlow, it looks like this:
API call

2.2 Making API call on a StaggeredView

Making an API call allows you to get a response (containing the list of items) and show them in the StaggeredView.
To make an API call on a StaggeredView:
  1. 1.
    Select the StaggeredView 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 Call Name to the API Name that fetches the data.
  5. 5.
    Click Confirm.
Making API call on a StaggeredView

2.3 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 which you can use to populate the StaggeredView.
To generate dynamic children:
  1. 1.
    Select StaggeredView 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.
    Set the Source value to the [apicall_name] Response (from StaggeredView).
  5. 5.
    Set the Response Options to JSON Body.
  6. 6.
    Under the Available Options, click on Unset and select the JSON Path.
  7. 7.
    Inside the 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.4 Showing data in UI elements

To show an image from the URL stored inside the variable.
  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.
Showing Data in UI Elements

Customizing

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

Changing cross axis count

The cross-axis count refers to the number of items displayed in a horizontal direction. By default, the StaggeredView shows two items in a row (i.e. horizontal direction).
To change the default value of Cross Axis Count:
  1. 1.
    Select the StaggeredView from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel and scroll down to the StaggeredView Properties section.
  3. 3.
    Change the value of the Cross Axis Count input box.
Changing cross axis count

Adjust the spacing between Items

When you add a StaggeredView to your FlutterFlow project, by default, it adds a space of 10px on the Cross Axis and Main Axis. That means the StaggeredView will insert the space of 10px horizontally and 10px vertically between the items.
To change the spacing between items:
  1. 1.
    Select the StaggeredView from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel and scroll down to the StaggeredView Properties section.
  3. 3.
    Change the value of the Cross Axis Spacing.
  4. 4.
    Change the value of the Main Axis Spacing.
Adjust the spacing between Items

Shrinking the StaggeredView

The StaggeredView widget takes up all of the available space vertically. To display other items above and below the StaggeredView, you need to enable the shrink wrap property.
To make the StaggeredView only take the size of its children:
  1. 1.
    Select the StaggeredView from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel and scroll down to the StaggeredView Properties section.
  3. 3.
    Turn on the Shrink Wrap toggle.
Below you can see how the Green color selection for Staggered shrinks down when Shrink Wrap is turned on.
Shrinking the StaggeredView

Add padding

​Here are the instructions on how to add padding.

Adjust alignment

​Here are the instructions for adjusting the alignment.

Showing empty list widget

See how to display an empty list widget when there is no data.

Scroll to the beginning or end

See how to scroll to the beginning or end with a click of a button.

Show/Hide StaggeredView

Please find the instructions to show/hide the widget here.
Last modified 3mo ago