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.

Adding StaggeredView

To create a simple StaggeredView with some images:

First, drag the StaggeredView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
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.

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.

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 calls comprises the following steps:

2.1 Prerequisites

Before we show data from an API call, make sure you incorporate all the mentioned prerequisites.

Be familiar with API calls.
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:

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:

Select the StaggeredView widget from the widget tree or the canvas area.
Click on the Backend Query tab (on the right side of your screen).
Set the Query Type to API Call.
Set the Call Name to the API Name that fetches the data.
Click Confirm.

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:

Select StaggeredView from the widget tree or the canvas area.
Click on the Generate Dynamic Children tab (on the right side of your screen).
Enter the appropriate Variable Name.
Set the Source value to the [apicall_name] Response (from StaggeredView).
Set the Response Options to JSON Body.
Under the Available Options, click on Unset and select the JSON Path.
Inside the JSON Path, enter the JSON expression to retrieve the list. See how to get JSON Path here.
Click Confirm.

2.4 Showing data in UI elements

To show an image from the URL stored inside the variable.

Select the Image widget, move to the properties panel, find the Path property and click on the Set from Variable text.
Select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.
Set the Available Options to JSON Path.
Inside the JSON Path, enter the JSON expression to retrieve the image URL. See how to get JSON Path here.
Click Confirm.

Adding infinite scroll

The StaggeredView widget is great for apps that have lots of different-sized pictures, like a Pinterest-like layout. It places everything in a neat and interesting pattern.

To enhance the user experience, you can add an 'infinite scroll' feature. This means as the user scrolls, new pictures just keep appearing without any need for the user to click a 'next' button.

We have already covered how to add infinite scroll on ListView widget, which will give you an overall idea of how to add infinite scroll on the StaggeredView widget as well.

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:

Select the StaggeredView from the widget tree or the canvas area.
Move to the properties panel and scroll down to the StaggeredView Properties section.
Change the value of the Cross Axis Count input box.

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:

Select the StaggeredView from the widget tree or the canvas area.
Move to the properties panel and scroll down to the StaggeredView Properties section.
Change the value of the Cross Axis Spacing.
Change the value of the Main Axis Spacing.

Add top and bottom spacing

See how to add top and bottom space here.

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:

Select the StaggeredView from the widget tree or the canvas area.
Move to the properties panel and scroll down to the StaggeredView Properties section.
Turn on the Shrink Wrap toggle.