How to fit a GridView.Builder inside a ClipPath Container in Flutter - flutter

Question

what I want to achieve is centring the whole grid view inside the blue background, and to be able to scroll it.
The screenshot only shows the container I'm editing and not the whole page.
Container>Stack
This is the list of services - an array with four elements. BaseScreen is just a ChangeNotifier from Provider.
class ServicesStateManager extends BaseScreenProvider {
final _servicesList = [
const Service(
serviceName: "serviceName1",
description:
"datadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata",
image: "assets/images/favicon.png",
),
const Service(
serviceName: "serviceName2",
description:
"datadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata",
image: "assets/images/favicon.png",
),
const Service(
serviceName: "serviceName3",
description:
"datadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata",
image: "assets/images/favicon.png",
),
const Service(
serviceName: "serviceName4",
description:
"datadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadat adatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata",
image: "assets/images/favicon.png",
),
];
List<Service> get getServicesList => _servicesList;
// TODO: add setter
}
This is the blue - Clipped Container and the Stack
ClipPath(
clipper: CustomBodyClipPath(),
child: Container(
color: samsBlue,
height: 1200,
width: double.infinity,
child: Stack(
fit: StackFit.expand,
children: [
BaseScreen<ServicesStateManager>(
builder: (context, model, child) => SizedBox(
height: 400,
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 1.0,
mainAxisSpacing: 1.0,
),
primary: false,
shrinkWrap: true,
itemBuilder: (context, index) {
return ServicesTileWidget(
servicesList: model.getServicesList[index],
);
},
itemCount: model.getServicesList.length),
),
),
// Heading
Positioned(
top: 600,
left: largeSpace,
child: Padding(
padding: const EdgeInsets.all(defaultPadding),
child: Text(
"Our Services",
style: Theme.of(context)
.textTheme
.headline1!
.copyWith(color: samsBlack),
),
),
),
],
),
),
),
This is the Clipper - CustomBodyClipper
class CustomBodyClipPath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
double w = size.width;
double h = size.height;
// Paint paint0 = Paint()
// ..color = const Color.fromARGB(255, 33, 150, 243)
// ..style = PaintingStyle.stroke
// ..strokeWidth = 1.0;
Path path = Path();
path.moveTo(0, size.height * 0.55);
path.quadraticBezierTo(size.width * 0.25, size.height * 0.3,
size.width * 0.6, size.height * 0.6);
path.quadraticBezierTo(size.width * 0.85, size.height * 0.8,
size.width * 1.0, size.height * 0.6);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
return path;
}
#override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
}