How to cliping container from center top - flutter

Question

Hello everyone I want to clip container from center top. I tried with custom clipper but not get success. Anyone please help me how to draw container like below image.
My Code
ClipPath(
clipper: TriangleClipper(),
child: Container(
height: 120,
color: Colors.red,
),
),
class TriangleClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var firstControlPoint = Offset(size.width / 2.5, 50.0);
var firstEndPoint = Offset(size.width / 2, 10.0);
var secondControlPoint = Offset(size.width - (size.width / 2.5), 50);
var secondEndPoint = Offset(size.width, 50);
var path = Path()
..lineTo(0, 50)
..lineTo(0, 70)
..cubicTo(0, 70, 0, 50, 20, 50)
..quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy)
..quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy)
..lineTo(size.width - 20, 50)
..cubicTo(size.width - 20, 50, size.width, 50, size.width, 70)
..lineTo(size.width, size.height)
..lineTo(0.0, size.height)
..close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Output:

Answer 1

i think you were missing path.moveTo(0.0, size.height);
import 'package:flutter/material.dart';
class CardCliping extends StatelessWidget {
const CardCliping({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.deepPurple.shade300,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipPath(
clipper: TriangleClipper(),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white)),
width: 130,
height: 40,
),
),
Container(
width: 400,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
border: Border.all(color: Colors.white, width: 0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {},
child: Icon(
Icons.home_outlined,
color: Colors.deepPurpleAccent,
),
),
GestureDetector(
onTap: () {},
child: Icon(
Icons.person_outline_outlined,
color: Colors.deepPurpleAccent,
),
)
],
),
),
],
),
),
);
}
}
class TriangleClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.moveTo(0.0, size.height);
path.lineTo(size.width * .5, 0);
//we dont need this
// path.lineTo(size.width, size.height);
path.lineTo(size.width, size.height);
path.close();
return path;
}
#override
bool shouldReclip(TriangleClipper oldClipper) => false;
}