[Flutter] Flutter GridView with PageScrollPhysics: Prevent Grid Items from Cropping on Page...

I'm working on a Flutter app where I need to display items in a horizontally scrolling gridview. I want the [tag:GridView ]to behave like a paginated view, where each "page" scrolls exactly by one set of items (like a pageview), but I’m running into issues with items getting cropped.

PageviewPhysic scroll to item crop issue image

I set up my gridviewwith pagescrollphysics to achieve a paginated scroll effect, and my grid is set to display items in a 3x3 format. However, when I scroll, the next "page" starts midway through an item, resulting in the items getting partially cropped on the left side.

Here's my current code:

GridView.builder(
// controller: controller,
physics: PageScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 2 / 8.80,
mainAxisSpacing: 10,
crossAxisSpacing: 0,
crossAxisCount: 3,
),
itemBuilder: (context, index) {
return Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image(
image: AssetImage('assets/images/appicon.png'),
height: 50,
width: 50,
),
),
SizedBox(width: 5),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"App Name",
style: TextStyle(
fontSize: 16,
height: 1,
),
),
Text(
"App Type",
style: TextStyle(
fontWeight: FontWeight.w400,
),
),
],
)
],
);
},
),


Expected Behavior

I want each "page" scroll in the GridView to display exactly 3 columns per page and snap neatly to the beginning of the next set of grid items, without any items being cropped or partially displayed.

Continue reading...