GridView
The GridView widget is used to display a list of items in a grid or two dimensions (Both vertically and horizontally at the same time.)
For example, you can use GridView to show a list of photos or a list of products.
.png?alt=media&token=51af36e2-7383-4555-815a-d8911c4765b0)
Gridview widget
To create a simple GridView with some images:
- 1.First, Drag the GridView 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.

To create a GridView widget with custom items:
- 1.First, Drag the GridView widget from the Layout Elements tab (in the Widget Panel).
- 2.Add the Container widget by dragging it from the same Layout Elements tab or directly from the widget tree.
- 3.Drag and drop the Column widget inside the added Container.
- 4.Add one Image widget inside the Column. Move to Property Editor, scroll down to the Image section, and set the Width to inf (Click onicon) and Height to 80.
- 5.Add a Text widget. Change the name to Product and set the Theme Style to Title 1.
.gif?alt=media&token=c06abff7-b8fb-48d5-95c2-6d626d0773b2)
At this point, you have one item added to the list. To fill the GridView with more items, copy-paste the Container widget.
To copy-paste a Container widget:
- 1.Select the Container widget.
- 2.Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
- 3.Select the GridView widget.
- 4.Right-click on it and select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.
.gif?alt=media&token=e8a8d51b-a779-42ba-ac40-dd0e5134d0bf)
After adding several items, the GridView looks like this:
.gif?alt=media&token=ae9ad584-a687-441b-b6a3-954a196c2e40)
You would probably like to show a list of items from your backend. There are two primary sources from where 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=6b1128a1-073a-499e-b73d-3f6cd2f96f88)
Pictures collection

Showing pictures from Firestore
You may be using your own infrastructure to store your app data. The data can be retrieved via API calls.
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:

Making an API call allows you to get a response (containing the list of items) and show them in the GridView.
To make an API call on a GridView:
- Select the GridView 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 Save.
.gif?alt=media&token=a95a7089-e464-49ba-bc0b-c4fc72d2eb03)
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 GridView.
To generate dynamic children:
- Select GridView 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 GridView).
- 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 Save.
.gif?alt=media&token=22e2dcde-11e5-432c-bf94-f7e4a3cd8da2)
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
Here's how it looks when you run your app:
.gif?alt=media&token=b39e25da-bcfe-4c5e-b716-4bbb80670238)
In the example above, you learned how to add items that scroll vertically, a default axis for scrolling a list in GridView.
To scroll the items horizontally:
- Select the GridView from the widget tree or the canvas area.
- Move to the Property Editor and scroll down to the GridView Properties section.
- Spot the Axis dropdown, and change it to Horizontal.
.gif?alt=media&token=9fd175b0-1fbb-48ec-ab10-72c5084f310d)
In the above visual, changing the scrolling Axis to Horizontal is not correctly displaying the items. In some cases, switching the axis may require you to redesign the item.
To correct the item layout for horizontal scroll direction, simply increase the Height of the Image widget and set it to 200.
Now, it should look like this:
.gif?alt=media&token=f9019a57-120f-4dee-b56e-5161ae232583)
By default, the GridView shows three items on the cross axis. That means if the Axis property is set to Vertical, GridView will show three items horizontally. And if the Axis is changed to Horizontal, then GridView will show three items vertically.
To change the default value of Cross Axis Count:
- Select the GridView from the widget tree or the canvas area.
- Move to the Property Editor and scroll down to the GridView Properties section.
- Change the value of the Cross Axis Count input box.
- Try changing the Axis dropdown and notice the difference.
.gif?alt=media&token=e12d50e7-d71e-4a84-90d3-f3a346c79186)
When you add a GridView to your FlutterFlow project, by default, it adds a space of 10px on the Cross Axis and Main Axis. That means if the Axis property is set to Vertical, GridView will insert the empty space of 10px horizontally and 10px vertically between the items. And if the Axis is changed to Horizontal, GridView will insert the empty space of 10px vertically and 10px horizontally between the items.
To change the spacing between items:
- Select the GridView from the widget tree or the canvas area.
- Move to the Property Editor and scroll down to the GridView Properties section.
- Change the value of the Cross Axis Spacing.
- Change the value of the Main Axis Spacing.
.gif?alt=media&token=57192bd1-03fa-43e8-b310-a39b57eaa3d2)
Sometimes you may want to change the item's height instead of keeping it in a square box. The Child Aspect Ratio property of the GridView allows you to do that. By default, the value for the Child Aspect Ratio is set to 1. That means the item's height will be the same size as of width of the item on the main axis. If the value changes to 2, the height will be reduced by 50% in the main axis direction.
To change the height of the item:
- Select the GridView from the widget tree or the canvas area.
- Move to the Property Editor and scroll down to the GridView Properties section.
- Enter a value in the Child Aspect Ratio input box.
- Try changing the Axis dropdown and notice the difference.
.gif?alt=media&token=faf807ff-4af1-4ec0-8feb-0ed333d78b61)
By default, the GridView widget takes up all the available space in its main axis. That means if the Axis property is set to Vertical, GridView will occupy all vertical space on the screen. Similarly, if the Axis is set to Horizontal, then GridView will reserve all the horizontal space.
To make the GridView only take the size of its children:
- Select the GridView from the widget tree or the canvas area.
- Move to the Property Editor and scroll down to the GridView Properties section.
- Checkmark the Shrink Wrap check box.
Below you can see how the Green color selection for GridView shrinks down when Shrink Wrap is checked.
.gif?alt=media&token=f11d6105-b4d9-4553-a305-77fcbbcd709c)
Last modified 3mo ago