Hey there! Let's tackle your Flutter animation performance head-on—you're already using lerpDouble for cubic Bézier path animations and hitting 60 UI FPS, but that GPU bottleneck sticking at ~25 FPS is definitely frustrating. Since 2Dimensions pulls off super complex animations smoothly, your hunch about unnecessary repaints is spot-on. Here are actionable fixes to optimize your setup:

1. Isolate Drawing with RepaintBoundary #

If your Bézier path drawing is nested in a busy widget tree, wrap the CustomPaint (or your drawing widget) in a RepaintBoundary. This stops the entire screen from repainting every time your animation updates—only the isolated region will redraw:

RepaintBoundary(
  child: CustomPaint(
    painter: BezierPathPainter(progress: _animationProgress),
  ),
)

Make sure your painter only reacts to the progress value, not any unrelated parent widget state changes.

2. Cache Static Path Components #

If you're regenerating the entire Bézier path on every frame, that's wasting CPU cycles (which then bottleneck the GPU). Cache static parts of the path (like fixed start/end points) and only interpolate the dynamic control points with lerpDouble:

class BezierPathPainter extends CustomPainter {
  final double progress;
  final Path _basePath; // Cached static path

  BezierPathPainter({required this.progress}) : 
    _basePath = Path()..moveTo(0, size.height / 2); // Static starting point

  @override
  void paint(Canvas canvas, Size size) {
    // Only interpolate dynamic control points
    final double ctrlX = lerpDouble(100, size.width - 100, progress)!;
    final double ctrlY = lerpDouble(size.height, 0, progress)!;

    // Build animated path from cached base
    final animatedPath = Path.from(_basePath)
      ..cubicTo(ctrlX, ctrlY, ctrlX, ctrlY, size.width, size.height / 2);
    
    canvas.drawPath(animatedPath, Paint()..color = Colors.blue);
  }

  @override
  bool shouldRepaint(covariant BezierPathPainter oldDelegate) {
    return oldDelegate.progress != progress; // Only repaint when progress changes
  }
}

3. Use AnimatedBuilder to Avoid Full Widget Rebuilds #

Ditch setState for updating animation values—AnimatedBuilder only rebuilds the specific part of the UI tied to the animation, not your entire widget tree:

AnimatedBuilder(
  animation: _animationController,
  builder: (context, staticChild) {
    return CustomPaint(
      painter: BezierPathPainter(progress: _animationController.value),
      child: staticChild, // Static content here won't rebuild
    );
  },
  child: const Text("Animated Bézier Path"), // Static child
)

4. Trim Down Paint Complexity #

GPU-heavy paint settings kill performance fast:

• Skip unnecessary shadows, blurs, or blend modes unless they're critical to your design.
• If you need shadows, pre-render them to a Picture or use ShaderMask instead of dynamic shadow rendering.
• Lower FilterQuality (e.g., FilterQuality.low) if visual fidelity allows.

5. Precompute Path Metrics (If Using Path Points) #

If you're calculating multiple points along the path for your animation, precompute PathMetrics once instead of recalculating every frame:

// Precompute once in your painter or widget init
final PathMetrics pathMetrics = _basePath.computeMetrics();
final PathMetric pathMetric = pathMetrics.first;

// In animation: get point by progress
final Tangent? tangent = pathMetric.getTangentForOffset(pathMetric.length * progress);
final Offset currentPoint = tangent?.position ?? Offset.zero;

Given your setup, starting with RepaintBoundary and AnimatedBuilder should give you an immediate FPS boost. From there, optimize your path calculation logic to avoid redundant computations.

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