Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can i reverse container radius to specific form

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
enter image description here

but i am trying to reverse it to be like following (sorry for the bad drawing)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

How could i achieve this with simple way ? best regards 🙂

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading