Comment on page
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
To create a simple StaggeredView with some images:
- 1.First, drag the StaggeredView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
- 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
You probably want to show a list of items from your backend. There are two primary sources from which you can get the data.
To show data from Firestore, create a collection, query a collection and then display the data in the Image widget.
.png?alt=media&token=f362d5be-0731-44de-b406-b2f9425b4f13)
Pictures collection
Showing pictures from Firestore
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:
Before we show data from an API call, make sure you incorporate all the mentioned prerequisites.
- 1.
- 2.
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
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.Select the StaggeredView widget from the widget tree or the canvas area.
- 2.Click on the Backend Query tab (on the right side of your screen).
- 3.Set the Query Type to API Call.
- 4.Set the Call Name to the API Name that fetches the data.
- 5.Click Confirm.
Making API call on a StaggeredView
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.Select StaggeredView from the widget tree or the canvas area.
- 2.Click on the Generate Dynamic Children tab (on the right side of your screen).
- 3.Enter the appropriate Variable Name.
- 4.Set the Source value to the [apicall_name] Response (from StaggeredView).
- 5.Set the Response Options to JSON Body.
- 6.Under the Available Options, click on Unset and select the JSON Path.
- 7.Inside the JSON Path, enter the JSON expression to retrieve the list. See how to get JSON Path here.
- 8.Click Confirm.
Generating dynamic children
To show an image from the URL stored inside the variable.
- 1.Select the Image widget, move to the properties panel, find the Path property and click on the Set from Variable text.
- 2.Select the [variable_name] item from the list. This should be the variable name you specified while Generating Children from Variable.
- 3.Set the Available Options to JSON Path.
- 4.Inside the JSON Path, enter the JSON expression to retrieve the image URL. See how to get JSON Path here.
- 5.Click Confirm.
Showing Data in UI Elements
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.
You can customize the appearance and behavior of the widget using the various properties available under the properties panel.
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.Select the StaggeredView from the widget tree or the canvas area.
- 2.Move to the properties panel and scroll down to the StaggeredView Properties section.
- 3.Change the value of the Cross Axis Count input box.
Changing cross axis count
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.Select the StaggeredView from the widget tree or the canvas area.
- 2.Move to the properties panel and scroll down to the StaggeredView Properties section.
- 3.Change the value of the Cross Axis Spacing.
- 4.Change the value of the Main Axis Spacing.
Adjust the spacing between Items
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.Select the StaggeredView from the widget tree or the canvas area.
- 2.Move to the properties panel and scroll down to the StaggeredView Properties section.
- 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
If you prefer watching a video tutorial, here's the one for you:
Last modified 2mo ago