enter image description here

I want to obtain an inverted border-radius indicated in the following picture.

CodePudding user response：

Surround your Image widget with ClipRRect widget. Specify the required border radius. As we need rounded borders, we specify circular border radius using BorderRadius.circular(). BorderRadius.circular() takes a double value as argument. This double value is the border radius for all the four corners of the rectangle. Following is the code snippet to display an image with round corners.

Example: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image( image: NetworkImage( 'https://www.img/hummingbird.png'), ), ),

CodePudding user response：

try to reference to this code, reference:

class Clipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var _height = size.height;
    var _width = size.width;

    var controlPoint1 = Offset(40, _height / 3.1);
    var controlPoint2 = Offset(_width - 40, 0);
    var endPoint = Offset(_width, _height / 2);

    var path = Path()
      ..cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
          controlPoint2.dy, endPoint.dx, endPoint.dy)
      ..lineTo(_width, _height)
      ..lineTo(0, _height)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}