AnimationsHard50 XP5 min read
How do you animate with CustomPainter?
TL;DR: Pass an Animation<T> to your CustomPainter and declare it in the repaint argument. Flutter calls paint() on every animation tick. shouldRepaint must return true when the animation value changes.
Full Answer
CustomPainter lets you draw directly on a canvas. For animations, you connect a Listenable (usually an Animation) via the repaint parameter.
Key Points
- ▸Pass animation to repaint: in the CustomPainter constructor
- ▸Implement shouldRepaint to return true when animation value changes
- ▸Use canvas.drawArc, drawPath, drawCircle etc. with animation.value
- ▸Wrap in RepaintBoundary to isolate repaints from the rest of the tree
⚠️
shouldRepaint returning always-true causes unnecessary repaints. Return true only when the painter's inputs actually changed.
Code Examples
dartAnimated arc with CustomPainter
Output
// Arc sweeps from 0° to 360° as animation progresses
Common Mistakes
- ✗Not passing animation to repaint: — the painter won't know when to redraw
- ✗Heavy computations inside paint() — pre-compute paths in shouldRepaint or the constructor
Interview Tip
💡
Mention that CustomPainter skips Flutter's widget system entirely — it talks directly to Skia/Impeller. That makes it the fastest path for complex custom visuals.
#custom-painter#canvas#repaint-boundary#should-repaint