how can I make animation in flutter when filling specific (path)?-CodePudding

I want to make like this animation in flutter using canvas and paths example of animation

CodePudding user response：

You need to clip the canvas in your CustomPainter according to the value of the animation you are using. Code is below. It's hard to answer without seeing your code, but here is a skeleton of how to do it using CustomPaint. The canvas in CustomPaint can be clipped to a shape and the progress of the animation can be passed in.

Your CustomPaint would look like this:

CustomPaint(
 painter: MyPainter(progress: animation.progress,..

And your CustomPainter would look something like this:

class MyPainter extends CustomPainter {
  final double progress;
  MyPainter({required this.progress...

  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();

    double radius = min(size.width, size.height)/2*progress;
    Offset center = size.center(Offset.zero);
    Rect rect = Rect.fromCircle(center, radius);
    RRect shape = RRect.fromRectAndRadius(rect, radius);
    canvas.clipRRect(shape);
    
    //your painting code here

    canvas.restore();
  }

This should clip your painting code to the circular shape.