Major refactoring of the library

[letsar]

Hello users of flutter_staggered_grid_view!

I know that have not (publicly) worked a lot on this package recently. I was aware of the performance issues but didn't know how to tackle the issue until recently.

There are two main reasons why infinite scroll does not work well with this package:

The layout mechanism

I didn't design this package with infinite scroll and dynamic size in mind at first. While it's great to have items which can span multiple columns, it does not really make sense in an infinite scroll situation, because some children could be added before the currently visible area.
For example, in the screen below, the light blue area is what it's currently visible for the user. The children 1, 2, 3 and 4 are visible.

If we add a 1x1 tile, this is how the layout will place the next child:

As you can see, it will not be visible for the user. Having various sizes in the cross axis in not great for this kind of use case.

I came to the conclusion that in order to have a solid component for infinite scroll, we need to have only children with the same cross axis extent. The current Staggered Grid View cannot do it.

The algorithm

The actual algorithm needs to remember all previous children positions and sizes. This is really not ideal in terms of memory and performances. It relies on too much specific code because having a double linked list did seem to be practical at the beginning of the implementation.

It has some flaws, and keep alive children in memory. This can lead to very inefficient layout:

staggered_grid_view_old_1.mp4

I had to think about a new algorithm and I believe that I find something much better. The following video has been recorded with the new algorithm:

staggered_grid_view_new_1.mp4

What next?

It'll take some time but I will release a new completely rewritten version.
This new version will offer more than one staggered grid view because of the limitation I mentioned concerning the infinite scroll.
It will be based on basic components coming from Flutter, thus it will be easier to understand and maintain.

What can flutter_staggered_grid_view users can do to help?

I will certainly need your help. While I will be busy refactoring everything, it would be great if some of you help me to label the issue.
At some point I will also need some volunteers to test the new algorithm and see if there are potential performances issues due to the new algorithm.
I'm also working on it on my spare time and you can support my work by sponsoring me on GitHub here: https://github.com/sponsors/letsar

I'll keep you posted!

[Abacaxi-Nelson]

Hey,
I can test your betas :)

[Tom3652]

I can also test :)
Thank you for this work !

[letsar]

Hi everyone !
I pushed the new branch, you can now test it with a git reference!
You can get this branch here: https://github.com/letsar/flutter_staggered_grid_view/tree/feature/renaissance and try it in your app by adding this in your pubspec.yaml:

dependencies:
  flutter_staggered_grid_view:
    git:
      url: [email protected]:letsar/flutter_staggered_grid_view.git
      ref: feature/renaissance

I surely need to add some documentation, but you can already test it!

[Tom3652]

Looks amazing with these new grids, thanks ! 🥇

However, the git reference seems to not be found or I am probably missing something here :

Git error. Command: `git clone --mirror https://github.com/letsar/flutter_staggered_grid_view/tree/feature/renaissance /Users/foxtom/Desktop/flutter/.pub-cache/git/cache/renaissance-26af2ef552239e5d547abc1820cf7f6af04f86cc`
stdout: 
stderr: Cloning into bare repository '/Users/foxtom/Desktop/flutter/.pub-cache/git/cache/renaissance-26af2ef552239e5d547abc1820cf7f6af04f86cc'...
fatal: repository 'https://github.com/letsar/flutter_staggered_grid_view/tree/feature/renaissance/' not found
exit code: 128
pub get failed (server unavailable) -- attempting retry 1 in 1 second...

And in my pubspec.yaml :

  flutter_staggered_grid_view:
    git:
      url: https://github.com/letsar/flutter_staggered_grid_view/tree/feature/renaissance

[letsar]

Ok I see, I edited my last comment to remove the confusion ;-).
You need to add the following snippet in your pubspec.yaml:

dependencies:
  flutter_staggered_grid_view:
    git:
      url: [email protected]:letsar/flutter_staggered_grid_view.git
      ref: feature/renaissance

[Tom3652]

Thanks it's working now ! :)
I had to change [email protected]:letsar/flutter_staggered_grid_view.git to https://github.com/letsar/flutter_staggered_grid_view.git to avoid a permission denied error but it's fine i can test the package 👍

[Tom3652]

I have found a bug that i had completely forgotten but that was already present in the previous version actually :)
I will take some time to make a reproductible code sample if needed (please let me know), but for now i will explain it :

Let's consider that we have a grid (SliverMasonryGrid in this case) with 3 elements.
First element is 1080x1920, second is 720x1280, third is also 720x1280 (not really important).

Now, if we add a new item at rank 0 (refreshing a list) with a size of 1350x2100, meaning that the above 1080x1920 becomes the second element of the list and all elements get a +1 index in the list, the rank 0 actually keeps the 1080x1920 size and all other items keep their sizes which breaks visually all of the item content :/

Thanks in advance !

[letsar]

I would be interested in a reproductible code sample indeed.
I tried to reproduce with that code but it runs as expected:

class MasonryPage extends StatefulWidget {
  const MasonryPage({
    Key? key,
  }) : super(key: key);

  @override
  State<MasonryPage> createState() => _MasonryPageState();
}

class _MasonryPageState extends State<MasonryPage> {
  final list = <double>[100, 300, 300];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverMasonryGrid(
            mainAxisSpacing: 4,
            crossAxisSpacing: 4,
            delegate: SliverChildListDelegate([
              ...list.mapIndexed((index, e) => Tile(index: index, extent: e)),
            ]),
            gridDelegate: SliverMasonryGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            list.insert(0, 400);
          });
        },
      ),
    );
  }
}

In the case of the SliverMasonryGrid, all the items share the same crossAxisExtent, so I don't understand how in your example you have different width, can you explain?

[Tom3652]

Thanks to your confirmation that it's working, i have found the issue in my code.
I was calculating the height in the initState() instead of the build() method, so the items were not changing sizes when reloading :)

My bad entirely !

[ftognetto]

hi @letsar Thank you for your work!
I can definitely give support and testing to your new version, but I didn't understand if there is a staggered grid view version in the branch feature/renaissance that supports infinite scroll