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

Question

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

Check this library https://pub.dev/packages/circular_reveal_animation — esentis, Dec 27 '21 at 16:38
@esentis thank you for your information, but unfortunately it doesn't serve my case. this library is using ClipPath, I'm using CusomtPaint with Canvas. — Mohammad Aldalati, Dec 27 '21 at 18:25

score 0 · Accepted Answer · answered Dec 27 '21 at 19:14

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.

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

1 Answers1