FlutterFlow Docs
Search…
GridView
The GridView widget is used to display a list of items in a grid or 2- 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.

Add a GridView to Your Project

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 simply 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).
    Now, add the Container widget by dragging it from the same Layout Elements tab or add it 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 on
    icon) 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 simply 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 a number of items the GridView looks like this:

Changing the Properties

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

Add Padding

Adding a padding value will adjust the overall size of the GridView widget.
To add Padding:
    Select the GridView from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Padding section.
    Enter the desired value.
    Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

Changing the Scroll Direction

In the example above you learned how to add items that scroll vertically, which is a default axis for scrolling a list in GridView.
To scroll the items horizontally:
    Select the GridView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the GridView Properties section.
    Spot the Axis dropdown, change it to Horizontal.
In the above visual, changing the scrolling Axis to Horizontal is not properly 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 3 items on the cross axis. That means if the Axis property is set to Vertical, GridView will show 3 items horizontally. and if the Axis is changed to Horizontal then GridView will show 3 items vertically.
To change the default value of Cross Axis Count:
    Select the GridView from the widget tree or from 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 a 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 then 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 from 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 a Height of Item

Sometimes you may want to change the height of the item 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 height of the item will be of the same size as of width of the item on the main axis. If the value changed 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 from 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 of 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 from 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.
Last modified 22d ago