CustomPaint, Ancestor of Flutter Animation

Lao Meng's guide: CustomPaint can be called the ancestor of animation, it can achieve any cool animation and effect.CustomPaint itself has no animation properties, just drawing properties. In general, CustomPaint works with animation control to achieve the desired effect.

Basic Usage

CustomPaint is very simple to use, as follows:

  painter: MyCustomPainter(),

MyCustomPainter is defined as follows:

class MyCustomPainter extends CustomPainter {
  void paint(Canvas canvas, Size size) {}

  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return this != oldDelegate;

The MyCustomPainter above does nothing to look clear, usually drawing a custom effect within the paint method.The shouldRepaint method usually returns true if the current and old instance properties are inconsistent.

paint is drawn by canvas, and size is the size of the current control. Here's how canvas works.

Draw Points

Paint _paint = Paint()
    ..color =
    ..strokeWidth = 3;

  void paint(Canvas canvas, Size size) {
    var points = [
      Offset(0, 0),
      Offset(size.width / 2, size.height / 2),
      Offset(size.width, size.height),
    canvas.drawPoints(PointMode.points, points, _paint);

PointMode has three modes:

  • points:
  • lines: Draw two points as segments, and if the number of points is odd, the last point will be ignored
  • polygon: Draw the entire point as a line

Draw lines

canvas.drawLine(Offset(0, 0),Offset(size.width, size.height), _paint);

Draw Path

Paint _paint = Paint()
  ..color = = PaintingStyle.stroke
  ..strokeWidth = 3;

void paint(Canvas canvas, Size size) {
  var _path = Path()
    ..moveTo(0, 0)
    ..lineTo(size.width, 0)
    ..lineTo(size.width, size.height)
  canvas.drawPath(_path, _paint);

Note here Can also be set to PaintingStyle.fill The effect is as follows:

Path's path should not be in a straight line at this time, otherwise it will not be effective.

Draw various shapes

Draw a circle

canvas.drawCircle(Offset(size.width/2, size.height/2), 20, _paint);

Draw an ellipse

canvas.drawOval(Rect.fromLTRB(0, 0, size.width, size.height/2), _paint);

If a given Rect is square, the ellipse will become a circle.

Draw an arc

    Rect.fromLTRB(0, 0, size.width, size.height), 0, pi/2, true, _paint);

Draw rounded rectangle

    RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(10)), _paint)

Canvas also has many drawing functions, such as Bezier curve, cubic Bezier curve, inversion of canvas, and so on, which are not covered here.

These functions are basically the same as Android's Canvas, if you have an Android base, you can apply them directly.

Finally, an animation of drawing a rose is presented:

Whether this effect is cool or not, let's take a look at drawing the flower code:

///Draw flower bones
_drawFlower(Canvas canvas, Size size) {
  //Change Flowers to Red
  if (flowerPaths.length >= RoseData.flowerPoints.length) {
    var path = Path();
    for (int i = 0; i < flowerPaths.length; i++) {
      if (i == 0) {
        path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);
      } else {
        path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);
    } = PaintingStyle.fill;
    _paint.color = _flowerColor;
    canvas.drawPath(path, _paint);
  //Draw lines = PaintingStyle.stroke;
  _paint.color = _strokeColor;
  //Remove the last two points, the last two points to draw red
  var points = flowerPaths.sublist(0, max(0, flowerPaths.length - 2));
  canvas.drawPoints(PointMode.polygon, points, _paint);

Flower bones are drawn only throughCanvas.drawPathThat's it. Actually, the whole rose is drawn byCanvas.drawPathPlus animation control.

CustomPaint can achieve any animation you want, such as a drawing board, with this control.

Get the full code style scanner below the two-dimensional code reply:rose


Lao Meng Flutter blog address (nearly 200 control usages):

Welcome to the Flutter Exchange Group (WeChat: laomengit), Focus on Public Number (Lao Meng Flutter):

Tags: Mobile Android

Posted on Tue, 02 Jun 2020 09:52:37 -0700 by mikefrederick