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.
Adding GridView widget
To add the GridView widget to your project:
Select the GridView widget from the Add Widget Button or add it directly from the widget tree.
Inside the GridView, you can add various widgets, and display them in a grid.
Customizing GridView Widget
Allow Scroll
If you want to make the grid scrollable, turn this toggle to On. This is On by default, and must be turned Off if you want to make the grid unscrollable.
Shrink Wrap
By turning this On, you can change this behavior so that the GridView only occupies the space it needs (it will still scroll when there are more items).
Cross Axis Count
It is used to specify the number of columns in a grid view. You can modify the number of columns in the grid using this property.
Cross Axis Spacing
It is used to specify the number of pixels between each child widget listed in the cross axis. You can modify the spacing between the columns using this property.
Main Axis Spacing
It is used to specify the number of pixels between each child widget listed in the main axis. You can modify the spacing between the rows using this property.
To change the spacing between items in the grid:
Select the GridView from the widget tree.
Navigate to Widget Properties panel (on the right side of the tree).
Change the value of the Cross Axis Spacing.
Change the value of the Main Axis Spacing.
Child Aspect Ratio
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.
Default Properties
You can customize the appearance and behavior of this widget using the various properties available under the Widget Default Properties.
Last updated