如何获得下图中给出的边界半径。 ＃扑

Question

enter image description here

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

Answer 1

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'), ), ),

Answer 2

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;
}