Flutter Custom RenderObjectの完全ガイド2026：カスタムペインティングと面接対策

// RenderObjectの基本的なライフサイクル
class CustomRenderBox extends RenderBox {
  @override
  void performLayout() {
    // レイアウト制約を受け取り、サイズを決定
    size = constraints.constrain(Size(200, 100));
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // キャンバスに描画
    final canvas = context.canvas;
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(offset & size, paint);
  }
}

class ResponsiveRenderBox extends RenderBox {
  @override
  void performLayout() {
    // 制約を子に伝播
    if (child != null) {
      child!.layout(constraints, parentUsesSize: true);
      size = child!.size;
    } else {
      size = constraints.smallest;
    }
  }

  @override
  bool hitTestSelf(Offset position) => true;

  @override
  void handleEvent(PointerEvent event, BoxHitTestEntry entry) {
    // イベントハンドリング
  }
}

class WaveformPainter extends CustomPainter {
  final List<double> samples;
  final Color waveColor;
  final double strokeWidth;

  WaveformPainter({
    required this.samples,
    this.waveColor = Colors.blue,
    this.strokeWidth = 2.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    if (samples.isEmpty) return;

    final paint = Paint()
      ..color = waveColor
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    final path = Path();
    final dx = size.width / (samples.length - 1);
    final midY = size.height / 2;

    path.moveTo(0, midY + samples[0] * midY);

    for (var i = 1; i < samples.length; i++) {
      path.lineTo(i * dx, midY + samples[i] * midY);
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(WaveformPainter oldDelegate) {
    return oldDelegate.samples != samples ||
           oldDelegate.waveColor != waveColor;
  }
}

class CircularProgress extends LeafRenderObjectWidget {
  final double progress;
  final Color backgroundColor;
  final Color progressColor;
  final double strokeWidth;

  const CircularProgress({
    super.key,
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.strokeWidth = 8.0,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCircularProgress(
      progress: progress,
      backgroundColor: backgroundColor,
      progressColor: progressColor,
      strokeWidth: strokeWidth,
    );
  }

  @override
  void updateRenderObject(
    BuildContext context,
    RenderCircularProgress renderObject,
  ) {
    renderObject
      ..progress = progress
      ..backgroundColor = backgroundColor
      ..progressColor = progressColor
      ..strokeWidth = strokeWidth;
  }
}

class RenderCircularProgress extends RenderBox {
  double _progress;
  Color _backgroundColor;
  Color _progressColor;
  double _strokeWidth;

  RenderCircularProgress({
    required double progress,
    required Color backgroundColor,
    required Color progressColor,
    required double strokeWidth,
  })  : _progress = progress,
        _backgroundColor = backgroundColor,
        _progressColor = progressColor,
        _strokeWidth = strokeWidth;

  set progress(double value) {
    if (_progress == value) return;
    _progress = value;
    markNeedsPaint();
  }

  set backgroundColor(Color value) {
    if (_backgroundColor == value) return;
    _backgroundColor = value;
    markNeedsPaint();
  }

  set progressColor(Color value) {
    if (_progressColor == value) return;
    _progressColor = value;
    markNeedsPaint();
  }

  set strokeWidth(double value) {
    if (_strokeWidth == value) return;
    _strokeWidth = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    final minDimension = constraints.biggest.shortestSide;
    size = Size.square(minDimension);
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    final rect = offset & size;
    final center = rect.center;
    final radius = (size.shortestSide - _strokeWidth) / 2;

    // 背景円
    final bgPaint = Paint()
      ..color = _backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = _strokeWidth;

    canvas.drawCircle(center, radius, bgPaint);

    // プログレス弧
    final progressPaint = Paint()
      ..color = _progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = _strokeWidth
      ..strokeCap = StrokeCap.round;

    final sweepAngle = 2 * pi * _progress;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -pi / 2,
      sweepAngle,
      false,
      progressPaint,
    );
  }
}

class OptimizedRenderBox extends RenderBox {
  @override
  bool get sizedByParent => true;

  @override
  Size computeDryLayout(BoxConstraints constraints) {
    return constraints.biggest;
  }

  @override
  void performResize() {
    size = constraints.biggest;
  }

  @override
  void performLayout() {
    // sizedByParentがtrueの場合、ここではサイズを設定しない
    // 子のレイアウトのみを行う
  }
}

class AnimatedChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: CustomPaint(
        painter: ChartPainter(),
        willChange: true,
      ),
    );
  }
}