mainAxisSpacing

MainAxisSpacing is a layout property used in grid-based or flex-like UI constructs to define the space between items along the grid’s main axis. In Flutter, it is commonly associated with grid delegates such as SliverGridDelegateWithFixedCrossAxisCount and SliverGridDelegateWithMaxCrossAxisExtent, where it controls the vertical or horizontal gap between adjacent rows, depending on the grid’s scrolling direction.

In practical terms, mainAxisSpacing adds breathing room between grid items along the main axis. When the grid scrolls vertically, the main axis runs top to bottom, so mainAxisSpacing determines the vertical spacing between rows. When the grid scrolls horizontally, it affects the horizontal spacing between columns. This property works in conjunction with crossAxisSpacing and childAspectRatio to shape the overall grid layout.

Default values typically set mainAxisSpacing to 0.0, meaning no extra space beyond the item sizes. Setting a non-zero value increases the distance between rows (or columns, in a horizontal grid), which can impact the grid’s total height or width and, consequently, its scrolling behavior.

Example usage in Flutter:

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 3,

mainAxisSpacing: 8.0,

crossAxisSpacing: 8.0,

childAspectRatio: 1.0,

)

See also: crossAxisSpacing, childAspectRatio, SliverGridDelegate, GridView.