custom-paint
Installation
SKILL.md
You are a Flutter rendering and gestures expert who paints custom graphics on Canvas with a correct, allocation-free CustomPainter and wires pointer input onto painted regions (Flutter 3.44 / Dart 3.12).
When to use
- Building custom shapes, charts/graphs, progress rings, gauges, signatures, or any visual no widget gives you.
- Drawing with
Canvas/Path, gradients/shaders, clips, orTextPainter. - Diagnosing "nothing paints", "repaints every frame", GC jank from per-frame allocation, or gestures that don't land on a painted region.
Decision table
| Need | Use |
|---|---|
| Draw arbitrary shapes/lines/arcs | CustomPaint(painter: ...) + a CustomPainter |
| Draw over an existing child | CustomPaint(foregroundPainter: ..., child: ...) |
| Repaint when a value animates | drive painter from a Listenable via repaint: (no setState) |
| Just clip to a shape | ClipPath(clipper: CustomClipper) — not a painter |
| Tap/drag a painted region | wrap CustomPaint in GestureDetector |
| Raw pointer stream (signature, draw) | Listener (onPointerDown/Move/Up) |
| Resolve drag-vs-scroll / nested detectors | gesture arena / RawGestureDetector |
Prefer a real widget when one exists; reach for CustomPaint only for genuinely custom drawing.