CustomPainter 和 CustomClipper 有什么区别？

Question

I am currently reading about Flutter and came to know that shapes can be created using CustomPainter and CustomClipper. Shapes like Rectangle, oval etc.. can be created using both so what is the difference between them and when should either of them be used?

Answer 1

CustomClipper

A clipper is used to restrict the rendering to a particular area. The rendering engine will only "paint" the pixels inside of the defined area. A CustomClipper will be mostly used with a ClipPath widget.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // Implement your custom clipper path
  }

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

ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
);

• CustomClipper Documentation
• ClipPath Documentation

CustomPainter

This interface is used alongside the CustomPaint which provides a canvas on which you can draw images and shapes.

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Implement your custom painter
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

CustomPaint(
  painter: MyCustomPainter(),
);

• CustomPainter Documentation
• CustomPaint Documentation

To resume: CustomClipper is restricting the painting area, while CustomPainter gives you a canvas to paint freely.

Which one to use ?

While you might be able to acomplish similar results with both depending on your use case it might be easier to use CustomClipper or CustomPainter .

For example if you only want to have some custom shape for a Container or an Image it will be much easier to do it with a CustomClipper compared to a CustomPainter as you will only need to define the path in which your widget will be rendered and you will still have access to all the properties of your widget.

Now let's take another example, if you want to create your own CircularProgressIndicator widget. In this case you might have a hard time by using the CustomClipper while thanks to CustomPainter you will be able to draw your widget much more freely and it will also be easier to animate. (If you take a look at how the ProgressIndicator are coded you will see that they are using CustomPainter )