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.

To create a simple GridView with some images:

First, Drag the GridView 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.

To create a GridView widget with custom items:

First, Drag the GridView widget from the Layout Elements tab (in the Widget Panel).
Add the Container widget by dragging it from the same Layout Elements tab or directly from the widget tree.
Drag and drop the Column widget inside the added Container.
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.
Add a Text widget. Change the name to Product and set the Theme Style to Title 1.

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:

Select the Container widget.
Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
Select the GridView widget.
Right-click on it and select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.

After adding several items, the GridView looks like this:

Showing backend data

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.

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. The data can be retrieved via API calls.

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 GridView

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.

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 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.

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.

Here's how it looks when you run your app:

Adding infinite scroll

The GridView widget is great for apps that have lots of pictures or items, like a photo gallery or a shopping app. To make it even better, you can add an 'infinite scroll' feature. This means new pictures or items will keep appearing as the user scrolls down.

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 GridView widget as well.

Customizing

The Properties Panel can be used to customize the behavior of your GridView widget.

Changing the scroll direction

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.

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:

Changing the cross axis count

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.

Adjust spacing between items

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.

Adjust item height

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.

Add top and bottom spacing

See how to add top and bottom space here.

Shrinking the GridView

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.