search

letsar / flutter_staggered_grid_view

A Flutter staggered grid view
MIT License
3.14k stars 510 forks source link

`crossAxisCellCount` and `mainAxisCellCount` are reversed? #309

Closed lukehutch closed 1 year ago

lukehutch commented 1 year ago

Using StaggeredGridTile.count, if I specify

              crossAxisCellCount: 1,
              mainAxisCellCount: 2,

then I get cells that are twice as tall as they are wide, whereas if I specify

              crossAxisCellCount: 2,
              mainAxisCellCount: 1,

then I get cells that are twice as wide as they are tall.

This seems reversed, since layout is left-to-right, then top-to-bottom -- so the main axis is the horizontal axis.

letsar commented 1 year ago

It depends on the axis direction of the scroll. If the scroll is horizontal, then the mainAxisCellCount refers to the number of cells in the horizontal axis whereas if the scroll if vertical, then, mainAxisCellCount refers to the number of cells in the vertical axis.

lukehutch commented 1 year ago

For the example I gave, the scroll direction was vertical.

letsar commented 1 year ago

It does not seem reversed to me, if the scroll is vertical and you want a cell that occupies 2 cells in the main axis and 1 cell in the cross axis then you'll get something like the blue cell in the image below. If you want a cell which occupies 2 cells in the cross axis and 1 cell in the main one, you'll get the green one. cell

lukehutch commented 1 year ago

Not sure how I kept managing to reverse this in my head. Sorry to take your time on this!

burcus commented 11 months ago

@lukehutch It seems I'm late but I'm writing this for those who will struggle this issue like me. StaggeredGrid.count behaves differently depending on it's parent. When you use it directly, mainAxis will be horizontal line. But if you wrap it with ListView your mainAxis will be vertical line. In readme example it's mainAxis is vertical line and crossAxis is horizontal line. So if you wrap your StaggeredGrid with ListView (which has Axis.vertical scroll direction) it will behave as specified in the readme example.