Flutter中CustomPainter的shouldRepaint方法工作原理及使用时机咨询

Hey Andrea, let's break down how shouldRepaint works in Flutter's CustomPainter—I get that the official docs can feel a bit abstract at first, so let's make it concrete.

Core Purpose #

At its heart, shouldRepaint is Flutter's way of asking: "Do I need to redraw this custom painter, or can I reuse the existing rendered output?" It's a performance optimization tool that prevents unnecessary redraws, which is critical for smooth UI, especially with complex custom graphics.

How It Works #

Here's the step-by-step flow:

• When the widget containing your CustomPainter gets rebuilt (e.g., due to state changes, parent widget updates), Flutter creates a new instance of your CustomPainter.
• Flutter then calls shouldRepaint, passing in the old instance of your CustomPainter as a parameter.
• Your implementation of this method decides whether to trigger a redraw:
  • Return true: Flutter will call the paint() method again, redrawing your custom graphics with the new state/data.
  • Return false: Flutter skips the redraw and reuses the previously rendered result.

How to Implement It Correctly #

The key is to compare the relevant mutable properties between the old and new CustomPainter instances. Only return true if those properties have changed—properties that affect what gets drawn.

For example, if your painter draws a colored rectangle, you'd compare the fill color:

class ColoredBoxPainter extends CustomPainter {
  final Color fillColor;

  ColoredBoxPainter(this.fillColor);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = fillColor;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant ColoredBoxPainter oldDelegate) {
    // Only redraw if the fill color has changed
    return oldDelegate.fillColor != fillColor;
  }
}

If you have multiple mutable properties, compare all of them:

@override
bool shouldRepaint(covariant MyComplexPainter oldDelegate) {
  return oldDelegate.fillColor != fillColor ||
         oldDelegate.strokeWidth != strokeWidth ||
         oldDelegate.progress != progress;
}

Common Use Cases #

• Dynamic graphics with state: If your painter depends on changing data (like a progress bar's percentage, a chart's data points, or a theme color), shouldRepaint ensures you only redraw when that data changes.
• Static graphics: For a fixed custom icon or shape that never changes, you can return false (and use a const constructor for your painter) to avoid any unnecessary redraws entirely.
• Animations: When using an AnimationController to drive custom animations, shouldRepaint should return true whenever the animation value updates—this keeps your animated graphics in sync with the animation timeline.

Common Pitfalls to Avoid #

• Always returning true: This defeats the purpose of the optimization, leading to redundant redraws that can cause jank, especially with complex paint() logic.
• Blindly returning false: If your painter's data changes but you return false, the UI won't update, leading to stale graphics.
• Missing properties in comparison: Forgetting to compare a relevant mutable property means your painter won't redraw when that property changes, resulting in bugs.

内容的提问来源于stack exchange，提问作者Andrea