การทดสอบการชนและการปรับประสิทธิภาพการวาดใหม่

When you draw with CustomPainter you take full control of the canvas. But two costs are easy to overlook: hit testing (deciding which pixels respond to taps) and repainting (re-running your paint code every frame).

• A naive painter that always returns true from shouldRepaint repaints on every rebuild, burning GPU and battery.
• By default a custom-painted region is transparent to pointer events, so taps fall through to widgets behind it.

This lesson shows how to make custom drawings both interactive and efficient.

A CustomPainter exposes two key overrides: paint for drawing and shouldRepaint for deciding when to re-run paint. There is also an optional hitTest for pointer logic.

• paint(Canvas canvas, Size size) — your drawing commands.
• shouldRepaint(covariant CustomPainter old) — return true only when visual inputs changed.
• hitTest(Offset position) — return true/false/null to control pointer routing.

shouldRepaint is called when a new painter instance is supplied to CustomPaint. If it returns false, Flutter skips the paint phase and reuses the cached layer.

• Compare only the fields that affect pixels.
• Returning true unconditionally defeats the optimization.
• Returning false when something did change causes stale, frozen visuals.

Compare values, not identity — two painter instances with equal fields should yield false.

Even a correct shouldRepaint can't help if your painter shares a layer with a frequently-rebuilding subtree. CustomPaint automatically wraps itself in a RepaintBoundary when given a child, but for a standalone painter you often add one explicitly.

• A RepaintBoundary gives the painted region its own compositing layer.
• Repaints inside the boundary don't force ancestors or siblings to repaint.
• Use the Flutter DevTools "Highlight Repaints" overlay to see which layers flash.

By itself a CustomPaint does not capture pointer events on the painted shapes — its hitTest defaults to returning null, meaning "defer to default box behavior." To make drawings tappable you wrap them in a gesture detector and/or override hitTest.

• Return true: this position is a hit; consume the event.
• Return false: not a hit; let it pass to widgets behind.
• Return null: use the default (the whole bounding box is a hit if opaque).

Override hitTest to restrict taps to the actual drawn shape rather than the rectangular bounds. For a circle, test the distance from the center against the radius.

This lets the corners of the bounding box pass touches through to whatever is behind, which feels natural for non-rectangular art.

The math behind circular hit testing is just the Euclidean distance. Here is a pure-Dart model you can run on any judge to verify the logic before wiring it into hitTest.

A point is inside the circle when its distance to the center is less than or equal to the radius.

For arbitrary shapes, build a Path in paint and reuse it in hitTest via Path.contains. Storing the path as a field avoids rebuilding it twice per frame.

• path.contains(position) returns true when the point lies inside the filled region.
• Cache the path; rebuild it only when geometry inputs change.

For animated painters, pass the driving Listenable (such as an AnimationController) to CustomPainter's repaint super-parameter. The painter then repaints when the animation ticks — without rebuilding the whole widget tree.

• super(repaint: animation) wires the painter to listen directly.
• This skips setState and avoids rebuilding siblings every frame.

Hit testing on the painter decides whether the painted region is opaque to pointers, but you still attach a GestureDetector to react. Combine them: precise hitTest plus a detector gives shape-accurate taps.

• The detector's onTapDown gives a local Offset.
• You can re-run the same geometry check to identify which sub-shape was hit.

Bring it together with a practical checklist for performant custom painting:

• Compare values in shouldRepaint — never blanket-return true.
• Use repaint: for animations instead of setState.
• Wrap in RepaintBoundary to isolate the painted layer.
• Cache Path and Paint objects; don't allocate per frame.
• Override hitTest so non-rectangular art passes through unused space.
• Profile with DevTools repaint highlighting and the timeline.

Consider what your shouldRepaint implementation should return to keep painting performant.

You learned how to keep custom-painted Flutter UIs both interactive and fast:

• shouldRepaint should compare only visual inputs by value, returning true just when they change.
• hitTest controls pointer routing: precise shape tests let non-rectangular art pass unused taps through.
• Path.contains and distance math give shape-accurate hit detection; cache the path.
• RepaintBoundary isolates the painted layer so repaints don't cascade.
• repaint: wires animations directly to the painter, avoiding full rebuilds.

Together these techniques eliminate wasted frames and make your canvas drawings feel native and responsive.