Why does slivergrid have poor scrolling animation compared to gridview with shrinkwrap?

34 Views Asked by At

I am creating a home page for an e-commerce app that should contain a grid displaying the best selling products.. I used a CustomScrollView widget and created a slivergrid displaying products. The problem is that when i scroll down, the frame drops which results in poor scrolling animation. So I tried using A SliverToBoxAdapter for a gridview with shrinkwrap and it turns out it had a better scrolling animation. Shouldnt the slivergrid have a better performance than a gridview with shrinkwrap?

Code for HomePage

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        const SliverAppBar(
          flexibleSpace: TopSection(),
          expandedHeight: 300,
          automaticallyImplyLeading: false,
          collapsedHeight: 70,
        ),

         // GridView 
         SliverToBoxAdapter(
          child: GridView.count(
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            crossAxisSpacing: GSizes.gridViewSpacing,
            mainAxisSpacing: GSizes.gridViewSpacing,
            childAspectRatio: 0.55,
            children: [for (var i = 0; i < 50; i++) const ProductVerticalTile()],
          ),
        )

        SliverToBoxAdapter(child: SizedBox(height: 50,),),

        // SliverGrid
        SliverGrid.count(                                    
          crossAxisCount: 2,
          childAspectRatio: 0.55,
          children: [for (var i = 0; i < 50; i++) const ProductVerticalTile()],
        )
      ],
    );
  }
}

GridView Performance when scrolling:

GridView Performance when scrolling

SliverGrid Performance when scrolling:

SliverGrid Performance when scrolling

important note: SliverGrid in fact has a better performance initially when the page is first built than gridview with shrinkwrap.

I tried to use slivergrid for better performance in scrolling which i was expecting but that wasnt the case.

0

There are 0 best solutions below