the grid items feels jittery, a little choppy while being scrolling

[yuvisingh01]

I have used layout grid for the grid view of product cards of my shopping app, but it makes the scroll laggy, It seems like It loads all the items of the grid unlike listview or grid view where only items in a view are only loaded which keeps the app lighter...

but here I see my app getting havier as the user scrolls, and at some stage, it even crashes the app, why is it so, is there anything I am doing wrong or it is bound to happen with layout grid widget.

below is the code snippet fo your reference..

int crossAxisCount = screenWidth > 600 ? 4 : 2;

Expanded(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
debugPrint('tapped');
},
child: SingleChildScrollView(
controller: scrollController,
child: Column(
children: [
LayoutGrid(
columnSizes: [
for (var _ in List.generate(crossAxisCount, (_) => 1.fr))
1.fr, // Equal column sizes
],
rowSizes: [
// ignore: unused_local_variable
for (var product in productsList)
auto, // Self-sizing rows
],
children: [
...productsList.map((product) {
return GestureDetector(
onTap: () async {

                        // Navigate to the ProductDetailsScreen
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ProductDetailsScreen(
                              product: product,
                            ),
                          ),
                        );
                      },
                      child: ProductCardWidget(
                        product: product,
                        onAddToCart: () {
                          ShoppingScreenMethods.addToCart(
                              product, 'home', context, ref);
                        },
                      ),
                    );
                  })
                ],
              ),
             ],
          ),
        ),
      ),
    )