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.
Gridview widget
Add 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 on
icon) and Height to 80.
5.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:
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.
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​
2.​Showing Data from API call​
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. 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.
1.Be familiar with API calls.​
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:
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.
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:
Customizing
The Properties Panel can be used to customize the behavior of your GridView widget.
Add Padding
​Here are the instructions on how to add padding.
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.
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.
Below you can see how the Green color selection for GridView shrinks down when Shrink Wrap is checked.
Enable pull to refresh
To enable pull to refresh on this widget, you can follow the instructions here.
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 GridView
Please find the instructions to show/hide the widget here.
ListView
Spacer
Last modified 3mo ago