Search code examples
flutterflutter-animation

In Flutter custom paint, how to fill a custom shape's body partially

I have a progress indicator like bellow. I want to fill it(according to the given task's progress) with green color like the image below. How can I do that efficiently? enter image description here

My Approach:

  1. I have calculated the equation of upper curve and lower curve;
  2. From left to right, for each point of upper and lower curve, I am drawing a line from upper curve to lower curve.

It works. But there is a problem.

The problem: The green progress indicating shape's edge is not smooth.

The resolution I have taken:

  1. Now, again from left to right only for each points of bottom curve, I have drawn vertical line of length 200 pixel.
  2. And clipped the extra part with the original equation of the shape.
  3. But this time, as soon as the progress bar fills gradually, frame rates drop significantly.

So what would be the proper way of doing t

Solution
    1. Paint Green Rectangle
    2. Use ClipPath to clip(convert green rectangle to curve like above) the Green Rectangle with Custom Path