flutter_staggered_grid_view

flutter_staggered_grid_view copied to clipboard

I have attached a video for reference, but when scrolling up there seems to be a lots of jumps and frame drops but scrolling down seems to be fine, can anyone give some guidance on this?

                    SliverMasonryGrid.count(
                            crossAxisCount: columnsLength,
                            itemBuilder: (context, index) {
                              return _Tile(
                                feeds[index],
                                plus,
                              );
                            },
                            childCount: feeds.length,
                          ),

https://user-images.githubusercontent.com/9320697/162642032-7dc1c1e0-364c-43df-bc94-5edc11dbab1f.mp4

This is probably because the tiles needs have a dynamic height and need to be kept alive. You may be need to use AutomaticKeepAliveClientMixin then.

I use SliverMasonryGrid.count in CustomScrollView and make item keep alive, drop frame problem disappear。 but all Items build, not dynamic build, how to resolve

I use SliverMasonryGrid.count in CustomScrollView and make item keep alive, drop frame problem disappear。 but all Items build, not dynamic build, how to resolve

I had this problem, and using this method, I save the item size in the first build for the desired item, and I no longer have this problem when scrolling back. example

SliverMasonryGrid.count(
                              crossAxisCount: 2,
                              childCount: model.existsProduct.length,
                              mainAxisSpacing: gridSpace,
                              crossAxisSpacing: gridSpace,
                              itemBuilder: (context, index) => MeasureSize(
                                onChange: (v) {
                                  model.existsProduct[index].height = v.height;
                                },
                                child: SelectProductLayout(
                                    product: model.existsProduct[index]),
                              ),
)

class Product{
 double?height;
...
}

class SelectProductLayout extends StatelessWidget {
  const SelectProductLayout({Key? key, required this.product})
      : super(key: key);
  final Product product;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: product.height,

I think this problem can be solved in the package itself with the key, restoration id, bucket storage or etc.

I also encountered this issue by setting the cache area, but when the route jumps back to the page, the scroll bar will jump

I also encountered this issue by setting the cache area, but when the route jumps back to the page, the scroll bar will jump

I have resolved the issue by improving his status and increasing the maximum cache size

I have the same problem, when i scroll down and then scroll up, some elements change its position, seeing a jump between elements position, can someone show me the code implemented to solve this bug ?