How can i make Container shape like a Plane in Flutter? - flutter

Question

Im trying to create a card or Container with borderRadius to change its top side shape like a plane Knob but i cannot make it im attaching a picture so please if any one know how to create this in flutter help me thanks
Shape:

Answer 1

You can play with CliPPath, change the control point value to make it perfect.
class Test extends StatefulWidget {
const Test({super.key});
#override
State<Test> createState() => _TestState();
}
class _TestState extends State<Test> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
body: LayoutBuilder(
builder: (p0, constaints) {
final width = constaints.maxWidth;
final double viewWidth = width * .8;
return Center(
child: SingleChildScrollView(
child: SizedBox(
width: viewWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//top Curve
ClipPath(
clipper: CurvePath(),
child: Container(
width: viewWidth,
height: viewWidth,
color: Colors.white,
),
),
Container(
width: viewWidth,
height: 1200,
color: Colors.white,
)
],
),
),
),
);
},
),
);
}
}
class CurvePath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
return Path()
..moveTo(0, size.height)
..quadraticBezierTo(20, 0, size.width / 2, 0)
..quadraticBezierTo(size.width, 0, size.width, size.height)
..lineTo(0, size.height);
}
#override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
}
Also shapeBorder may help.