[Desktop] Auto adjust column/width on width change

[bibijaan]

When I expand width or reduce the width in desktop, it doesn't change it's column, unless a refresh.

[rydmike]

@letsar This is the bug I have been seeing since forever too and I might have mentioned in a Tweet.

Thanks @bibijaan for reporting it, I have been too lazy to report it. The behavior I have seen is indeed that if you change only the width, it sometimes does not refresh, but by changing the height at the same time it will refresh.

I have also notice that when you resize just the width, it can also drop items!

I have really ancient live web demo if it running here:

https://rydmike.com/gridtest/#/

If you select the Staggered Grid demo:

You get something like this:

and then do just a horizontal resize, it may sometimes drop items, like so:

And a height resize will bring them back:

And like you mentioned, sometimes it does not refresh at all:

---

Disclaimer:

The build for the above linked Web example is from a really ancient Flutter version by now and probably an older StaggeredGridView version too, so the situation might have changed. I have however still observed the behavior in recent apps using the Staggered Grid View too, so I think the issue is still there.

I will update all to latest versions and make the example simpler and provide a link to the demo code in a Gist. Putting this on my TODOs for this issue report. I should have an updated demo of it later today or tomorrow.

[tomosullivan8]

@rydmike did you manage to find anything further on this? I'm having the same issue where the crossAxisCount doesn't appear to be obeying the int given based on specific breakpoints.

I had been through my breakpoints and I couldn't seem to find an issue, so I started to use the AdaptiveBreakpoints package but I have the same issue still, and came across this when trying to see if anyone else had the same problem.

[tomosullivan8]

I managed to get around the issue, changing the SliverStraggeredGrid.countBuilder to a StaggeredGridView.countBuilder and wrapping in a SliverFillRemaining.

Not ideal, but a fix for now.

[rydmike]

@tomosullivan8 Sadly I have not had time to look into this issue either. Considering how popular this package is and that this is a really critical for Web usage (and desktop) of it, I'm a bit surprised @letsar has not looked into it himself. I don't think the issue shows up on tablets/phones since you can't resize just one dimension, on orientation change both dimensions change at the same time, and that kind of resize seems to work on desktop/web resize too.

I have it on my todo list to clone the repo and see I can find the issue. Then again I saw some mention of another package for similar layout that was reported to not have this issue, but I forgot what it was called, besides I like this one... 😄

[tomosullivan8]

The issue I had was when changing the desktop window size the panels wouldn't correctly adjust when require. I was using the Adaptive_Breakpoints package for screen sizes, so added the below key which makes the panels resize correctly.

key: ValueKey<AdaptiveWindowType>(getWindowType(context))

[rydmike]

Thanks, I was just checking up on the status of issue. This does indeed work, not super smooth, but at least it works and for my use case right now that is good enough.

This is the same issue and workaround: https://github.com/letsar/flutter_staggered_grid_view/issues/167

cc @letsar

[rydmike]

To readers of this issue, this comment in its same/related issue might be of interest too: https://github.com/letsar/flutter_staggered_grid_view/issues/167#issuecomment-961937316

[letsar]

Can you test with the latest 0.5.0 preview? https://pub.dev/packages/flutter_staggered_grid_view/versions/0.5.0-dev.1

[rydmike]

@letsar a test of the new version using the Masonry layout is shown and demonstrated as a web build here: https://rydmike.com/gridtest-0-5-0-dev-1/#/

This blog post describes the detection of the issue already in 2019. I used the same demo from 2019, but migrated to null-safety and built with latest Flutter 2.8.0.

In StaggeredGridView 0.4.1 the same issue from 2019 is still present. I could however no longer repeat or see the issue in version 0.5.1-dev.1. The updated blog post about it has more details for those interested and link to test repo.

Imo the issue can be closed, same imo applies to later duplicate issue: https://github.com/letsar/flutter_staggered_grid_view/issues/167

[letsar]

Thanks @rydmike this feedback and your blog post are very useful! I'm closing this issue then 🙂