flutter : I want curve clip on top - flutter

Question

I am using multiple curve in my container but that is show on bottom. how to set on top?
Please help me.
I am using multiple curve in my container but that is show on bottom. how to set on top?
Please help me.
I am using multiple curve in my container but that is show on bottom. how to set on top?
Please help me.
This is my code.
import 'package:evillage_app/style/style.dart';
import 'package:flutter/material.dart';
class MenuCard extends StatefulWidget {
const MenuCard({Key? key}) : super(key: key);
#override
_MenuCardState createState() => _MenuCardState();
}
class _MenuCardState extends State<MenuCard> {
List menuService = [
{'name': 'ASAA', 'icon': 'assets/icon/ASAA.png'},
{'name': 'INFO INDIA', 'icon': 'assets/icon/Info India.png'},
{'name': 'BUSINESS', 'icon': 'assets/icon/business.png'},
{'name': 'E-DIARY', 'icon': 'assets/icon/e Diary.png'},
{'name': 'NEWS', 'icon': 'assets/icon/News.png'},
{'name': 'SERVICES', 'icon': 'assets/icon/Service.png'},
];
#override
Widget build(BuildContext context) {
return Stack(
children: [
ClipPath(
clipper:SkewCut() ,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width / 1.58,
decoration: BoxDecoration(gradient: menuGradient),
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: (2 / 0.75),
crossAxisSpacing: 2,
mainAxisSpacing: 5,
physics: ScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width / 30,
vertical: 13),
children: List.generate(
menuService.length,
(index) {
return Container(
child: Card(
shadowColor: Colors.grey,
elevation: 4,
child: Container(
width: MediaQuery.of(context).size.width / 1,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(25)),
color: Colors.white,
),
child: ListTile(
leading: CircleAvatar(
// backgroundColor: red,
backgroundImage:
AssetImage(menuService[index]['icon']),
),
contentPadding: EdgeInsets.only(left: 15),
title: Text(
menuService[index]['name'].toString(),
style: labelStyle(),
overflow: TextOverflow.ellipsis,
),
)),
));
},
),
),
),
),
],
);
}
}
class SkewCut extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, size.height);
path.quadraticBezierTo(
size.width / 4, size.height - 40, size.width / 2, size.height - 20);
path.quadraticBezierTo(
3 / 4 * size.width, size.height, size.width, size.height - 30);
path.lineTo(size.width, 0);
return path;
}
#override
bool shouldReclip(SkewCut oldClipper) => false;
}
This is ScreenShot

Answer 1

My suggestion would be using CustomPaint instead of CustomClipper<Path>.
CustomPaint
class SkewCut extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.purpleAccent;
paint.style = PaintingStyle.fill;
var pathUp = Path();
pathUp.moveTo(0, size.height * 0.1033);
pathUp.quadraticBezierTo(size.width * 0.25, size.height * 0.145,
size.width * 0.5, size.height * 0.1033);
pathUp.quadraticBezierTo(size.width * 0.75, size.height * 0.0750,
size.width * 1.0, size.height * 0.1033);
pathUp.lineTo(size.width, 0);
pathUp.lineTo(0, 0);
canvas.drawPath(pathUp, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
I have just replaced your CustomClipper with CustomPainter.
Usage
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: SkewCut(),
child: <<YOUR CHILD WIDGET>>,
),
);
}

Answer 2

While there are many ways to do this but personally I use the following visual editor to have some generated code and then tweak it based on requirements.
https://fluttershapemaker.com/
This saves me a lot of time and effort.