How to subtract one container from another? - flutter

Question

I am new to Flutter. I was trying to implement this UI 👇👇
The way I was implementing is
class SearchFlightBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
left: 25,
right: 25,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RoundButton(
icon: Arrow_Forward.icon_ionic_md_arrow_round_back,
title: "ONE WAY",
iconSize: 10,
),
RoundButton(
icon: Two_Arrows.group_73,
title: "ROUND TRIP",
iconSize: 16,
),
],
),
Container(
// base Conatiner
margin: EdgeInsets.only(
top: 35,
),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(-10, -10),
blurRadius: 15,
color: Color(0xffFFFFFF)),
],
borderRadius: BorderRadius.circular(4),
color: Color(0xffF6F9FF),
),
child: ClipPath(
clipper: MyCustomClipper(),
child: Container(
//Subtraction Container
decoration: BoxDecoration(
// color: Color(0xffF6F9FF),
color: Colors.red,
border: Border.all(
color: Color(0x00000000),
),
boxShadow: [
BoxShadow(
offset: Offset(0, 5),
blurRadius: 10,
color: Color(0x0f140B2B),
),
]),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(
vertical: 15,
horizontal: 15,
),
child: Icon(
TakeOff.take_off,
size: 30,
color: Theme.of(context).accentColor,
),
),
Padding(
padding: const EdgeInsets.only(
top: 15,
bottom: 5,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'FORM',
style: Theme.of(context).textTheme.caption,
),
SizedBox(
height: 10,
),
Text(
'Sydney, Austraila',
),
],
),
)
],
),
),
),
),
// Container(
// margin: EdgeInsets.only(
// right: 25,
// ),
// transform: Matrix4.translationValues(-3.0, -20, 0.0),
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(50),
// color: Colors.red,
// ),
// height: 50,
// width: 50,
// ),
// Container(
// height: 100,
// width: double.infinity,
// color: Colors.red,
// )
],
),
);
}
}
My Custom Clipper is
import 'dart:math';
import 'package:flutter/cupertino.dart';
class MyCustomClipper extends CustomClipper<Path> {
#override
getClip(Size size) {
Size newSize = Size(size.width, size.height - 40);
double radius = 40;
Offset center = Offset(6 * size.width / 7, size.height + 20);
Offset firstEnd = Offset(6 * size.width / 7, size.height - radius);
Offset secondEnd = Offset(6 * size.width / 7 + radius, size.height);
print('size: ' + size.toString());
// TODO: implement getClip
Path path = Path()
// ..lineTo(0, size.height)
// ..lineTo(0, size.height)
// ..arcToPoint(
// Offset(7 * size.width / 8, size.height - radius),
// radius: Radius.circular(radius),
// )
// ..arcToPoint(
// Offset(7 * size.width / 8 + radius, size.height),
// radius: Radius.circular(radius),
// )
// // ..arcTo(
// // Rect.fromCircle(
// // center: Offset(3 * size.width / 4, size.height),
// // radius: radius,
// // ),
// // 1 * pi,
// // 2,
// // true)
// ..lineTo(size.width, size.height)
..arcTo(
Rect.fromCircle(
center: center,
radius: radius,
),
1.3 * pi,
1.8 * pi,
true);
// ..lineTo(size.width, 0)
// ..lineTo(0, 0)
return path;
}
#override
bool shouldReclip(covariant CustomClipper oldClipper) {
// TODO: implement shouldReclip
return false;
}
}
As You can see, I was first clipping with ..artoPoint(). But That was just joining the two point with arc radius. That function is cutting a semicircle.
And I tried with ..arTo() function. But In that Function, I have to specify the start angle and sweep angle. But There is no way I can tell the value of both angle(Is there any way to know?).
I just want a function that will just draw a circle at a given center. And Just cut the portion of the container(in my case) and be done with it.
Or is There anyway I can do?