How can i reverse container radius to specific form - flutter

Question

i have the simple following code
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 300,
height: 100,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(topRight: Radius.circular(30.0),topLeft: Radius.circular(30.0),)
),
),
),
);
}
the outputs looks like following
but i am trying to reverse it to be like following (sorry for the bad drawing)
How could i achieve this with simple way ? best regards :)

Answer 1

This can be done with a CustomPainter:
class InvertedRoundedRectanglePainter extends CustomPainter {
InvertedRoundedRectanglePainter({
required this.radius,
required this.color,
});
final double radius;
final Color color;
#override
void paint(Canvas canvas, Size size) {
final cornerSize = Size.square(radius * 2);
canvas.drawPath(
Path()
..addArc(
// top-left arc
Offset(0, -radius) & cornerSize,
// 180 degree startAngle (left of circle)
pi,
// -90 degree sweepAngle (counter-clockwise to the bottom)
-pi / 2,
)
..arcTo(
// top-right arc
Offset(size.width - cornerSize.width, -radius) & cornerSize,
// 90 degree startAngle (bottom of circle)
pi / 2,
// -90 degree sweepAngle (counter-clockwise to the right)
-pi / 2,
false,
)
// bottom right of painter
..lineTo(size.width, size.height)
// bottom left of painter
..lineTo(0, size.height),
Paint()..color = color,
);
}
#override
bool shouldRepaint(InvertedRoundedRectanglePainter oldDelegate) =>
oldDelegate.radius != radius || oldDelegate.color != color;
}
You can play with this example on DartPad: https://dartpad.dartlang.org/?id=18cfbcc696b43c7c002a5ac3c94dd520