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 :)

CodePudding user response：

This can be done with a

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